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

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