md-datepicker does not respect locale on manual input

[adoris]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

if german locale set - input date typed from keyboard must recognized in local format ("dd.mm.yyyy").

What is the current behavior?

if date selected by mouse - right date in right format will be diaplayed (german locale - displayed 21.07.2017).
If date will be typed from keyboard - "21.07.2017" - date will not be accepted.
If date will be typed from keyboard - "07/21/2017" - date will be accepted.
Input date will be accepted only in "mm/dd/yyyy" format, not in "dd.mm.yyyy".

What are the steps to reproduce?

here is a sample with locale "de-DE":
https://plnkr.co/edit/FNdibHY1y77mXrSiMTfL

1. select date "01.juli.2017" from calender: "1.7.2017" will be showed in input control, "1.7.2017" set to bound variable.
2. change date to "21.07.2017" with keyboard by adding 2 to the beginning of string: null will be set to bound variable.
3. change date to "07/21/2017" with keyboard: "07/21/2017" will be showed in input control, "21.07.2017" will be set to bound variable.
4. change date to "07.28.2017" with keyboard: "28.7.2017" will be showed in input control, null will be set to bound variable.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/core 4.3.0 @angular/material 2.0.0 beta8

Is there anything else we should know?

[julianobrasil]

Take a look: https://plnkr.co/edit/GFTZ2Y7GfbUlNUWE3KLR?p=preview

😄 I think this is what you want, am I right? (look at the parse function in the custom-date-adapter.ts file)

[adoris]

thanks a lot for your sample! :) with your workaroung now this works as expected.
But i expect, that this behavior must be in original control, withiout external adapter.

[julianobrasil]

This is a limitation of the javascript Date object used by the NativeDateAdapter, @adoris. The original plans of the material guys is to provide one or two date adapters and left the apps developers with the choice to make others for themselves. One of these adapters is the NativeDateAdapter, that works with javascript Date object and its limitations concerning locales and formats configuration. There are future plans to suport Moment.js (a MomentDateAdapter).

[adoris]

If NativeDateAdapter will not support user locale - all material components have no chance to be used in production code. Components from other manufacturer will be used.

[julianobrasil]

For now, de NativeDateAdapter is the only prebuilt DateAdapter. But the component is in its very early stages (it was released in beta 6, IIRC). The MomentDateAdapter will come up for more complex scenarios (where you want to give the final user a chance to define the interface locale, for example).

[niklas-dahl]

@julianobrasil you solution seems not to work for date times.
when typing 20.7.2015 11:30 it gives me UTC Date: Invalid Date using the german locale.

[niklas-dahl]

for anyone interested I modified the plunkr a bit to support hour, minute and second parsing.

It's not pretty but until the Moment adapter is implemented it should be enought..

parse(value: any): Date | null {
    try {

      if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
        const parts = value.split(' ');

        const datePart = parts[0];
        const timePart = parts[1];

        // parse date part
        const str = datePart.split('.');

        const year = Number(str[2]);
        const month = Number(str[1]) - 1;
        const date = Number(str[0]);

        // parse time part
        let hour = 0, minute = 0, second = 0;
        if (timePart) {
          const time = timePart.split(':');
          hour = Number(time[0]);
          if (time[1]) {
            minute = Number(time[1]);
          }
          if (time[2]) {
            second = Number(time[2]);
          }
        }

        return new Date(year, month, date, hour, minute, second);
      }
      const timestamp = typeof value === 'number' ? value : Date.parse(value);
      return isNaN(timestamp) ? null : new Date(timestamp);

    } catch (err) {
      return null;
    }
  }

[julianobrasil]

\o/

Just make sure you don't use the calendar popup to set the date. It will overide your time. There are plans for a timepicker in the future.

[adoris]

proposed workaround with DateAdapter is very dirty hack, not for production code: for example, i can write "31.31.2017" and this will be accepted as a valid date.
where can we see a roadmap for this basis control - md-datepicker? or this is not for community?
is there any plans for TimePicker control?

[adoris]

Why date format on selection by mouse are different from date format for keyboard input?
When this bug will be fixed?

[julianobrasil]

This is not a bug. You can control the date chosen with mouse selection by overriding the format function in the NativeDateAdapter.

[jelbourn]

This is currently working as expected. We recommend using a custom DateAdapter (or waiting for more pre-made adapters) for a full i18n solution.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}