2015-11-02 20 views
9

Quando si utilizza la direttiva md-datepicker in materiale angolare, il formato della data non sembra funzionare per l'immissione diretta.md-datepicker input format

Se si seleziona una data nel calendario, verrà visualizzata come specificato (nel mio caso GG-MM-AAAA), ma se provo a modificare l'input manualmente, la mia voce viene analizzata come MM-GG-AAAA.

Finora, il mio datepicker è impostato utilizzando questo codice da this question

angular.module('MyApp').config(function($mdDateLocaleProvider) { 
    $mdDateLocaleProvider.formatDate = function(date) { 
    return date ? moment(date).format('DD-MM-YYYY') : ''; 
    }; 
}); 

Here è un codepen di vedere il problema in azione.

C'è un modo per impostare il formato di immissione?

risposta

17

L'evento data del formato non è sufficiente. È inoltre necessario configurare l'evento della data di analisi.

$mdDateLocaleProvider.parseDate = function(dateString) { 
    var m = moment(dateString, 'DD-MM-YYYY', true); 
    return m.isValid() ? m.toDate() : new Date(NaN); 
}; 

Vedi penna aggiornamento: http://codepen.io/anon/pen/GpBpwZ?editors=101

5

La base soluzione completa è:

$mdDateLocaleProvider.formatDate = function(date) { 
return date ? moment(date).format('DD-MM-YYYY') : ''; 
}; 

$mdDateLocaleProvider.parseDate = function(dateString) { 
var m = moment(dateString, 'DD-MM-YYYY', true); 
return m.isValid() ? m.toDate() : new Date(NaN); 
}; 
0
config($mdDateLocaleProvider) { 
    $mdDateLocaleProvider.formatDate = function(date) {  
     if(date !== null) { 
     if(date.getMonthName == undefined) { 
      date.getMonthName = function() { 
      var monthNames = [ "January", "February", "March", "April", "May", "June", 
      "July", "August", "September", "October", "November", "December" ]; 
      return monthNames[this.getMonth()]; 
      } 
     }   
     var day = date.getDate(); 
     var monthIndex = date.getMonth(); 
     var year = date.getFullYear(); 
     return day + ' ' + date.getMonthName() + ' ' + year; 
     } 
    }; 
    }