md-datepicker input format - angularjs

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

Answer 2

The complete solution base it's:
$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);
};

Answer 3

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;
}
};
}

Answer 4

Two more definitions need to provide apart from formatDate -
parseDate - this to make sure manually entered date is valid
isDateComplete - this to make sure not to start validating partially entering date
Reference
/**
* #param date {Date}
* #returns {string} string representation of the provided date
*/
$mdDateLocaleProvider.formatDate = function (date) {
return date ? moment(date).format('DD-MM-YYYY') : '';
};
/**
* #param dateString {string} string that can be converted to a Date
* #returns {Date} JavaScript Date object created from the provided dateString
*/
$mdDateLocaleProvider.parseDate = function (dateString) {
var m = moment(dateString, 'DD-MM-YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
/**
* Check if the date string is complete enough to parse. This avoids calls to parseDate
* when the user has only typed in the first digit or two of the date.
* Allow only a day and month to be specified.
* #param dateString {string} date string to evaluate for parsing
* #returns {boolean} true if the date string is complete enough to be parsed
*/
$mdDateLocaleProvider.isDateComplete = function (dateString) {
dateString = dateString.trim();
// Look for two chunks of content (either numbers or text) separated by delimiters.
var re = /^(([a-zA-Z]{3,}|[0-9]{1,4})([ .,]+|[/-]))([a-zA-Z]{3,}|[0-9]{1,4})/;
return re.test(dateString);
};