Ngx-bootstrap: BsDatepickerConfig dateInputFormat doesn't work when patching values manually.

[pedroaraujo74]

The DateInputFormatter works perfectly and displays the desired format when selecting the date through the datepicker but when I patch the value through the form like this: this.form.patchValue({ date_begin: new Date() }) it stays with the default MM/DD/YYYY format.

The datepicker:
bsDatepicker #d="bsDatepicker" [bsConfig]="{ dateInputFormat: 'DD-MM-YYYY' }"

Does anyone know a fix for this?

edit by @valorkin: solution https://github.com/valor-software/ngx-bootstrap/issues/2809#issuecomment-407677822

[stiffold]

Same problem, pls pls fix.

[Nokhoneryu]

Same problem here! Can it be fixed or done in other ways?

[aurerua]

Same problem when initialising and binding through [(ngModel)] to a date formated as 'YYYY-MM-DD'.

[abhishekdgeek]

Same problem here. Any update for this? Or a method to patch values using some internal method?

[javilingt]

I have the same problem. When I want to init the input with any value, the format is wrong. Only works when I select the date in the calendar.

[cyberabis]

Badly need this fixed! Does someone have a workaround?

[dottodot]

This post suggests it not currently possible and a feature request needs submitting https://github.com/valor-software/ngx-bootstrap/issues/2702

[cyberabis]

KrzysztofJaneczko - thanks! using this for now as a workaround.

[alexisAvenel]

To fix this issue you have to add formControlName to the input like this.

in component.ts

import * as moment from 'moment';
import {BsDatepickerConfig} from 'ngx-bootstrap/datepicker';
import {defineLocale} from 'ngx-bootstrap/bs-moment';
import {fr} from 'ngx-bootstrap/locale';

[...]

    public dpConfig: Partial<BsDatepickerConfig> = new BsDatepickerConfig();

    constructor(private _formBuilder: FormBuilder) {
        moment.locale('fr');
        defineLocale('fr', fr);
        this.Form = this._formBuilder.group({
            startDate: [this.startDate, Validators.required],
            endDate: [this.endDate, Validators.required]
        });

        this.dpConfig.containerClass = 'theme-blue';
        this.dpConfig.locale = 'fr';
        this.dpConfig.dateInputFormat = 'L'; // Or format like you want
    }

in component.html

    <div class="input-group" [formGroup]="Form">
        <input class="form-control"
               bsDatepicker
               id="startDate"
               type="text"
               [bsConfig]="dpConfig"
               formControlName="startDate"
               value="{{ startDate | date: 'dd/MM/yyyy' }}"
               [(ngModel)]="startDate">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
    <div class="input-group" [formGroup]="Form">
        <input class="form-control"
               bsDatepicker
               id="endDate"
               type="text"
               [bsConfig]="dpConfig"
               formControlName="endDate"
               [minDate]="minEndDate"
               value="{{ endDate | date: 'dd/MM/yyyy' }}"
               [(ngModel)]="endDate">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>

[stiffold]

Yes this works! value="{{birthDate.value | date: 'dd/MM/yyyy'}}" birthDate is FormControl. Thx :)

[LordAlastair]

@alexisAvenel thank you!

[abhishekdgeek]

Any working workaround for template driven forms?

Thanks,
Abhishek.

[joaofsilva]

Above solution doesn't work for initial value?

[abhishekdgeek]

Yes @joaofsilva . :|

[bendandi]

The solution above works for initial value but typing new date in it still handles the input as mm/dd/yyyy. Anyone found a workaround for that case?

[konasunny]

the below steps will solve the issue
1) import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
2) inject BsDatepickerConfig in constructor
3) this._bsDatepickerConfig.dateInputFormat = 'DD MMM YYYY';

[bendandi]

@konasunny This correctly formats an initial date or one selected from calendar according to selected locale, but when using the input field to type in a date its seems to only accept mm.dd.yyyy.

You can test this behaviour in the locales example here https://valor-software.com/ngx-bootstrap/#/datepicker

1. select 'de' from locales dropdown.
2. select date from datepicker calendar. Note dd.mm.yyy format.
3. in the datepicker input type in 13.11.2017 (day > 12). Press enter.
4. expected: datepicker input should read 13.11.2017, 13th November 2017 should be selected on calendar.

5. actual: datepicker input is emptied, calendar selected date is not updated.

6. in the datepicker input type in 12.10.2017 (day <= 12). Press enter.

7. expected: datepicker input should read 12.10.2017.
8. actual: datepicker input reads 10.12.2017. (dd & mm switched)

[felikf]

Should not the typed-in date be parsed using provided date format from this.dpConfig.dateInputFormat ?

Instead of _locale.preparse(value), see bs-datepicker-input.directive.ts:

if (typeof value === 'string') {
      const date = new Date(_locale.preparse(value));
      this._value = isNaN(date.valueOf()) ? null : 
}

https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker-input.directive.ts#L79

When I use @alexisAvenel solution I am still getting what @bendandi is describing (broken type in date format - not reflected in date picker).

[nathanchan01]

It depends on what kind of form we use
For Template Driven Form: go @konasunny 's way
For Model Driven Or Reactive Forms: @alexisAvenel is correct

[experionakash]

Is this issue fixed for bsDateRangePicker?
value="{{birthDate.value | date: 'dd/MM/yyyy'}}"
I tried this and not worked for me because in case of date range picker birthDate contains an array of date objects.

[valorkin]

You set date format for value via config or bsConfig property

[jonasmedeiros]

@valorkin when you add mask DD/MM/YYYY and add date by the calendar for example 11/02/1985 it works but when changing to the year to 2000 it goes for 02/11/1985 so there is a issue on focus out, is putting to the format of MM/DD/YYYY, so the only way this is working is to add DD/MMM/YYYY

[dottodot]

So how should dateInputFormat work? I've have the following bsConfig on a daterangepicker

    this.bsConfig = {
      containerClass: 'theme-blue',
      showWeekNumbers: false,
      dateInputFormat: 'DD/MM/YYYY'
    };

but it's still formatted as MM/DD/YYYY

[Prmleo]

bsDatepicker [(bsValue)]="cusDob" value="{{ cusDob | date:'dd/MM/yyyy' }}"
/>
try this

[manmohanagarwal4]

If you are using Date Range Picker then instead of "dateInputFormat" you should use _"rangeInputFormat"_ in [bsConfig] .
I had fixed by this option .
Thanks .

[startswithaj]

Bump

[karthiikramesh]

@konasunny, thank you the above solution works for me

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
inject BsDatepickerConfig in constructor
this._bsDatepickerConfig.dateInputFormat = 'YYYY-MM-DD';

[ujjaldey]

If you are using Date Range Picker then instead of "dateInputFormat" you should use _"rangeInputFormat"_ in [bsConfig] .
I had fixed by this option .
Thanks .

Worked for me

[fabriciobatalha]

If you are using Date Range Picker then instead of "dateInputFormat" you should use _"rangeInputFormat"_ in [bsConfig] .
I had fixed by this option .
Thanks .

It worked for me. Thanks, @manmohanagarwal4!

[afeef1915]

How to Fix Onchange Date after manually insert date date gets changed to different date.

for example

               10-May-1989  works for date format DD-MMM-YYYY
    main.js:2203 Wed May 10 1989 00:00:00 GMT+0530 (India Standard Time)
    14:11:40.317 main.js:2203 10-May-1989


    10/5/1989 but when manually change format it doesn' works.
    main.js:2203 Mon Jan 10 0005 00:00:00 GMT+0553 (India Standard Time)
    10-Jan-0005

it result different date.

code

 <input type="text" class="form-control" 
            bsDatepicker
            [formControlName]="field.code"
            [bsConfig]="datePickerConfig"
            [(ngModel)]="someDate"
            (ngModelChange)="testfunc($event)"
            placeholder='DD-MMM-YYYY'
            #dp="bsDatepicker"
            (keyup)="dp.toggle()"
           />

   function testfunc(search){


if (this.search!== '') {
  if (moment(search).isValid()) {
    this.someDate= moment(new Date(search)).format('DD-MMM-YYYY');
  } else {
    this.someDate= '';
  }

}