Dorian M Dorian M - 1 year ago 1198
AngularJS Question

md-datepicker input format

When using the md-datepicker directive in angular material, the date format doesn't seem to work for direct input.

If I select a date in the calendar, it will be displayed as specified (in my case DD-MM-YYYY) but if I try to change the input manually, my entry is analysed as MM-DD-YYYY.

So far, my datepicker is set using this code from this question

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

Here is a codepen to see the problem in action.

Is there a way to setup the entry format?

Answer Source

Format date event is not enough. You should also configure parse date event.

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

See updated pen:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download