Styjun

To also address the problem pointed out by kazuar:

Unfortunately it doesn't work if the date is typed from the keyboard

you should define the parseDate method as well. From the docs:

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

For a full example, I have in my app (using moment):

$mdDateLocaleProvider.formatDate = function(date) 
 return 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);
;

Regards

For those not using Moment.js, you can format as a string:

.config(function($mdDateLocaleProvider) 
 $mdDateLocaleProvider.formatDate = function(date) 

 var day = date.getDate();
 var monthIndex = date.getMonth();
 var year = date.getFullYear();

 return day + '/' + (monthIndex + 1) + '/' + year;

 ;
);

Worked perfectly when the date is typed from the keyborard and returned null in initiation to avoid the massage 'Invalid date' in md-datapicker directive:

$mdDateLocaleProvider.formatDate = function(date) 
 return date ? moment(date).format('DD/MM/YYYY') : null;
;

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

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) 

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>

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

Using $filter instead of moment.js and in reference to responses from @Ian Poston Framer and @java dev for me the following finally worked for me:

angular
 .module('App', ['ngMaterial'])
 .run(function($mdDateLocale, $filter) 
 $mdDateLocale.formatDate = function(date) 
 return $filter('date')(date, "dd-MM-yyyy");
 ;
 )

I couldn't inject $filter into.config because it's not a provider, so I had to do it inside .run with $mdDateLocale.

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

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.

For angular-material >= 5.x.x

The recommended way of using other custom/predefined date formats is described in the angular material documentation:

https://material.angular.io/components/datepicker/overview#choosing-a-date-implementation-and-date-format-settings

An implementation example using MomentJS for customizing and parsing datetime display formats:

...
import MomentModule from 'angular2-moment';

import MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_FORMATS from '@angular/material-moment-adapter';
import DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE from '@angular/material/core';

...

// moment formats explanation: https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = 
 parse: 
 dateInput: 'YYYY-MM-DD',
 ,
 display: 
 dateInput: 'YYYY-MM-DD',
 monthYearLabel: 'MMM YYYY',
 dateA11yLabel: 'YYYY-MM-DD',
 monthYearA11yLabel: 'MMMM YYYY',
 ,
 ;

 ...

@Component(
 ...
 providers: [
 // `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
 // `MatMomentDateModule` in your applications root module. We provide it at the component level
 // here, due to limitations of our example generation script.
 provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE],
 // provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS,
 provide: MAT_DATE_FORMATS, useValue: MY_FORMATS
 ]
)

...

Depending on your implementation, inside the component you might also need to use:

date = new FormControl(moment());

You must also install Moment library and adapter for Angular:

https://www.npmjs.com/package/angular2-moment

npm install --save angular2-moment

https://www.npmjs.com/package/@angular/material-moment-adapter

npm install --save @angular/material-moment-adapter

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

);

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.

in my case I was loosing the PlaceHolder everythig works but the placeHolder was disappearing when I use custom formatting. Below lines solved my problem with placeholder.

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