Material: md-datepicker date format is only US formatting since 1.1.0

[a2bsoftware]

Actual Behavior:

• What is the issue? * mdDatePicker date format does not reflect browser default localisation.
• What is the expected behavior? The date format is the same as the browser's default date formatting.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: See Angular Material datepicker demo v1.0.9 vs v1.1.1
• Details: Change Chrome language setting to be English (New Zealand) and choose date with datepicker, all dates will be US format mm/dd/yyyy. You can use the datepicker demo from Angular Material website.

Angular Versions: *

• Angular Version: 1.5.8
• Angular Material Version: 1.1.0 and 1.1.1 (works correctly on 1.0.9 and below)

Additional Information:

• Browser Type: * Chrome
• Browser Version: * 54.0.2840.99 m (64-bit)
• OS: * Win10 and Android Nougat

[crisbeto]

This was intentional. The issue was that a lot of people whose formatting is different from the US would select a date via the calendar, however if they tried to use the input to change it, it would be considered invalid. If you want to do custom formatting, you can use the $mdDateLocaleProvider.

[stefan-leye]

Sorry, but I don't understand, how $mdDateLocaleProvider can help here. In https://github.com/angular/material/commit/14fa477decdf61fb33c48f54f7da4f88364055d1 the function setModelValue has been added, which converts dates into a hard-coded format.
How can I change this format? I actually set my formatting function in $mdDateLocaleProvider. But this has obviously no influence on the format used by the datapicker.

[crisbeto]

The changes from 14fa477decdf61fb33c48f54f7da4f88364055d1 are internal @stefan-leye. Regarding the formatting, $mdDateLocaleProvider has a bunch of methods that you can override, but the ones that are relevant in this case are:

1. parseDate - This is what gets called when the user enters a date manually via the input. You should use this to parse your custom formatting into a Date object.
2. formatDate - This is what formats the date that is displayed inside the input.

You can read more about them and see an example in the docs.

[topherfangio]

@stefan-leye Here is an example of what @crisbeto means: http://codepen.io/topherfangio/pen/wgGMPm

Can you get it to work with this?

[stefan-leye]

@topherfangio I've been using parseDate and formatDate before (that's what I meant with "I actually set my formatting function") it had no impact. That's why I debugged the code and ended up at the position in the commit. Now I'm using an alternative datepicker solution. Sorry.

[waratah]

Just because I ended up here... There is a hard coded format with m/d/y in the formatting function.

When you npm install you can look at the datepicker source. In there there is a commented out section of code like this (rewritten in typescript)

    // Example uses moment.js to parse and format dates.
    this.$mdDateLocale.parseDate = (dateString) => {
        var m = moment(dateString, 'L', true);
        return m.isValid() ? m.toDate() : new Date(NaN);
    };

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

This uses Moment to format the dates in your local format. Please remember to install your local for moment for example:

import 'moment';
import 'moment/locale/en-au';
import 'moment/locale/en-gb';
import 'moment/locale/en-nz';

This installs England, Australian and New Zealand. there is also a complete locale install you could use.