Change format of md-datepicker in Angular Material with momentjs

Question

Angular material introduced a new date picker component found here.

I want the date returned by this component to be in the format yyy-mm-dd but I am not su

Answer 1

Changing date format, month names and week names during runtime is perfectly possible with AngularJS 1.5.9 and moment 2.17.1.

First configure the initial language. (In this example the configuration of angular-translate/$translateProvider is optional.)

angular.module('app').config(configureLocalization)

configureLocalization.$inject = ['$translateProvider', '$mdDateLocaleProvider', 'localdb', '__config'];
function configureLocalization($translateProvider, $mdDateLocaleProvider, localdb, __config) {
  // Configure angular-translate
  $translateProvider.useStaticFilesLoader({
      prefix: 'locale/',
      suffix: '.json'
  });
  // get the language from local storage using a helper 
  var language = localdb.get('language');
  if (!language || language === 'undefined') {
    localdb.set('language', (language = __config.app.defaultLanguage));
  }
  // Set the preferredLanguage in angular-translate
  $translateProvider.preferredLanguage(language);

  // Change moment's locale so the 'L'-format is adjusted.
  // For example the 'L'-format is DD.MM.YYYY for German
  moment.locale(language);

  // Set month and week names for the general $mdDateLocale service
  var localeData = moment.localeData();
  $mdDateLocaleProvider.months      = localeData._months;
  $mdDateLocaleProvider.shortMonths = moment.monthsShort();
  $mdDateLocaleProvider.days        = localeData._weekdays;
  $mdDateLocaleProvider.shortDays   = localeData._weekdaysMin;
  // Optionaly let the week start on the day as defined by moment's locale data
  $mdDateLocaleProvider.firstDayOfWeek = localeData._week.dow;

  // Format and parse dates based on moment's 'L'-format
  // 'L'-format may later be changed
  $mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'L', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
  };

  $mdDateLocaleProvider.formatDate = function(date) {
    var m = moment(date);
    return m.isValid() ? m.format('L') : '';
  };
}

Later you may have some base controller that watches a language variable which is changed when the user selects another language.

angular.module('app').controller('BaseCtrl', Base);

Base.$inject = ['$scope', '$translate', 'localdb', '$mdDateLocale'];
function Base($scope, $translate, localdb, $mdDateLocale) {

  var vm = this;
  vm.language = $translate.use();

  $scope.$watch('BaseCtrl.language', function(newValue, oldValue) {
    // Set the new language in local storage
    localdb.set('language', newValue);
    $translate.use(newValue);

    // Change moment's locale so the 'L'-format is adjusted.
    // For example the 'L'-format is DD-MM-YYYY for Dutch
    moment.locale(newValue);

    // Set month and week names for the general $mdDateLocale service
    var localeDate = moment.localeData();
    $mdDateLocale.months      = localeDate._months;
    $mdDateLocale.shortMonths = moment.monthsShort();
    $mdDateLocale.days        = localeDate._weekdays;
    $mdDateLocale.shortDays   = localeDate._weekdaysMin;
    // Optionaly let the week start on the day as defined by moment's locale data
    $mdDateLocale.firstDayOfWeek = localeData._week.dow;
  });
}

Notice how we don't need to change the $mdDateLocale.formatDate and $mdDateLocale.parseDate methods as they are already configured to use the 'L'-format that is changed by calling moment.locale(newValue).

See the documentation for $mdDateLocaleProvider for more locale customization: https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider

Bonus: This is how the language selector may look like:

<md-select ng-model="BaseCtrl.language" class="md-no-underline">
  <md-option
    ng-repeat="language in ['en', 'de', 'fr', 'nl']"
    ng-value ="language"
  ><span
    class    ="flag-icon flag-icon-{{language ==='en' ? 'gb' : language}}"
  ></span>
  </md-option>
</md-select>

Answer 2

I'd like to provide my solution that's 100% based off of Christiaan Westerbeek's post. I really like what he did, but I personally wanted something a bit more simplistic.

appConfig.js

// config params in global scope that need to be set outside of Angular (due to Angular limitiations)
var appConfig = {
    // enables the dynamic setting of md-datepicker display masks (eg. when user changes language from English to Spanish)
    date: {
        // default mask
        format: "MM/dd/yyyy",

        // md-datepicker display format
        mdFormatDate: function (date) {
            if (date && date instanceof Date) {
                return date.format(appConfig.date.format);

            } else {
                return null;

            }

        }

    }

};

app.material.config.js

// set angular material config
app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
    // this is a global object set inside appConfig.js
    $mdDateLocaleProvider.formatDate = appConfig.date.mdFormatDate;

}]);

some service file that deals with localization/translations/etc

// inside the service where you'd track the language/locale change
service._updateConfigDateFormat = function (theNewDateFormat) {
    // where theNewDateFormat is something like 'yyyy/MM/dd' or whatever
    daepConfig.date.format = theNewDateFormat;

};

It should be noted that this solution will not live re-format your md-datepicker's display values. It will only work when the model changes values.

Answer 3

I had same problem and came up with this simple solution with the help of moment.js. I used ng-change attribute which fires when the date is changed.

Inside your HTML:

<md-datepicker ng-model="myDate" ng-change="dateChanged()"></md-datepicker>

Inside your controller:

$scope.dateChanged = function() {
    this.myDate = moment(this.myDate).format('YYYY/MM/DD');
}

Answer 4

If you are using the latest version of angular-material.js then use the $mdDateLocale service. This code sample uses angular's built in date filter as an alternative to using the moment.js library. See other date format options using angular's $filter service here at this link https://docs.angularjs.org/api/ng/filter/date.

// mainController.js
angular.module('app').config(function($mdDateLocale, $filter, $scope) {

  // FORMAT THE DATE FOR THE DATEPICKER
  $mdDateLocale.formatDate = function(date) {
        return $filter('date')($scope.myDate, "mediumDate");
  };

});

Answer 5

-- When we use md-DatePicker in md-dialog then $mdDateLocaleProvider service doesnot format the date as we need. We have to use $mdDateLocale in controller of md-dialog to format the date of md-DatePicker. for example -

angular.module('MyApp').controller('AppCtrl', function($scope, $mdDateLocale) {

  $mdDateLocale.formatDate = function(date) {
    return moment(date).format('YYYY-MM-DD');
  };

  $scope.myDate = new Date('2015-10-15');

  $scope.minDate = new Date();

  $scope.maxDate = new Date();
});

Answer 6

I used $mdDateLocaleProvider to format it on the frond end. If you want to format date while sending it to the back end, the following worked for me :-

$filter('date')(this.date, 'MM/dd/yyyy');

I have the above in controller.