web-dev-qa-db-fra.com

format d'entrée md-datepicker

Lorsque vous utilisez la directive md-datepicker dans un document angulaire, le format de date ne semble pas fonctionner pour une entrée directe.

Si je sélectionne une date dans l'agenda, elle sera affichée comme spécifié (dans mon cas, JJ-MM-AAAA), mais si j'essaie de modifier l'entrée manuellement, mon entrée est analysée comme MM-JJ-AAAA.

Jusqu'ici, mon datepicker est défini en utilisant ce code de cette question 

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

Ici est un codepen pour voir le problème en action.

Est-il possible de configurer le format de saisie? 

angularjsangular-material
10
Dorian M

Le format de l'événement de date n'est pas suffisant. Vous devez également configurer l'événement de date d'analyse.

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

Voir le stylo mis à jour: http://codepen.io/anon/pen/GpBpwZ?editors=101

18
Kursad Gulseven

La base de solution complète c'est:

$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);
};
5
Hetdev
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;
      }
    };
  }
0
Kanchan