md-datepicker input format

Question

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 1

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: http://codepen.io/anon/pen/GpBpwZ?editors=101