Angular 4 datepicker locale not working properly

Question

I'm using ng-pick-datetime UI component for the date picker. I disabled readonly mode, so that the input is active for typing with keyboard.

<owl-date-time name="client_birthday" #client_birthday="ngModel"
    [placeHolder]="'DD.MM.YYYY'"
    [locale]="ru"
    [(ngModel)]="client.client_birthday"
    [type]="'calendar'"
    [dataType]="'string'"
    [dateFormat]="'DD.MM.YYYY'"
    [readonlyInput] ="false"
    [autoClose] ="true"
    [inputId]="'client_birthday'"                                                   
></owl-date-time>

I try to apply RU locale using date-fns:

ru: any;
ruLocale = require('date-fns/locale/ru');
ngOnInit() {     
    this.ru = {
        firstDayOfWeek: 1,
        dayNames: [...],
        dayNamesShort: [...],
        monthNames: [...],
        monthNamesShort: [...],
        dateFns: this.ruLocale
    };
}

When I type into the input with dd.mm.yyyy format, the picker makes day as a month and month as a day, and the year is ok. So, the only format it recognizes is mm.dd.yyyy, which seems to be us locale. My calendar language changed as expected, but is it possible to configure date format for RU as well?

I would appreciate any help.

https://github.com/DanielYKPan/date-time-picker#localization does this solve problem — Naresh Thakur, Nov 22 '17 at 21:12

score 6 · Answer 1 · answered Nov 25 '17 at 16:34

It seams unable to do what you want when input date by typing on input box of ng-pick-datetime. I went through the implementation of the ng-pick-datetime Component. When typing, given input converting to date object by using https://date-fns.org/v1.29.0/docs/parse Here is the implementation picker.component.ts/src/picker.component.ts Line-1177 Method-parseToDate

/**
     * Parse a object to Date object
     * @param {any} val
     * @return {Date}
     * */
    private parseToDate( val: any ): Date {
        if (!val) {
            return;
        }

        let parsedVal;
        if (typeof val === 'string') {
            parsedVal = parse(val, this.dateFormat, this.now);
        } else {
            parsedVal = val;
        }

        return isValid(parsedVal) ? parsedVal : null;
    }

https://github.com/DanielYKPan/date-time-picker has used "date-fns": "^2.0.0-alpha.7g" on package json. It has a argument to pass the date format to parse date.

parsedVal = parse(val, this.dateFormat, this.now);

But latest version of date-fns: "^1.29.0", Do not have parmeter to pass the date format. So it fails on your project too. Please read https://date-fns.org/v1.29.0/docs/parse

parse(argument, [options])

Good point, thanks. Maybe you could suggest other date picker plugin that supports date formatting? — Gyuzal, Nov 27 '17 at 03:39
I am suggesting you to edit ng-pick-datetime code to match for your requirement and use it on your solution. I haven't used any datepicker matching with your requirement. https://github.com/kekeh/mydatepicker this is supporting to formatting but not when type on input. If my answer help you to solve your problem please vote me up ;). — Janith Widarshana, Nov 27 '17 at 04:29

sancelot · Answer 2 · 2017-11-23T07:32:00.133

2

similar to this:

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: "ru-ru"},
    //otherProviders...
  ]
})

have a look at this How to set locale in DatePipe in Angular 2?

edited Nov 23 '17 at 07:32

answered Nov 22 '17 at 14:48

sancelot

1,905
12
31

1

IF you're going for a 50 point bounty, I'd recommend providing the _specific_ LOCALE_ID, rather than suggesting they follow the model and adjust themselves... – random_user_name Nov 22 '17 at 15:14
LOCALE_ID is a constant provider token from angular core. That is the correct value. – bryan60 Nov 22 '17 at 15:39
that didn't work unfortunately. It seems to be used for pipes only – Gyuzal Nov 23 '17 at 03:39

Angular 4 datepicker locale not working properly

2 Answers2