Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

md-datepicker does not respect locale on manual input #5792

Closed
adoris opened this issue Jul 15, 2017 · 13 comments
Closed

md-datepicker does not respect locale on manual input #5792

adoris opened this issue Jul 15, 2017 · 13 comments

Comments

@adoris
Copy link

adoris commented Jul 15, 2017

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
Copy link
Contributor

julianobrasil commented Jul 15, 2017

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
Copy link
Author

adoris commented Jul 16, 2017

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
Copy link
Contributor

julianobrasil commented Jul 16, 2017

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
Copy link
Author

adoris commented Jul 16, 2017

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
Copy link
Contributor

julianobrasil commented Jul 16, 2017

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor

julianobrasil commented Jul 19, 2017

\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
Copy link
Author

adoris commented Jul 20, 2017

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
Copy link
Author

adoris commented Aug 9, 2017

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

@julianobrasil
Copy link
Contributor

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

@jelbourn
Copy link
Member

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
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants