BsDatepickerConfig dateInputFormat doesn't work when patching values manually. #2809

pedroaraujo74 · 2017-10-06T16:34:07Z

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 #2809 (comment)

The text was updated successfully, but these errors were encountered:

stiffold · 2017-10-10T10:11:44Z

Same problem, pls pls fix.

Nokhoneryu · 2017-10-10T10:14:42Z

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

aurerua · 2017-10-13T10:48:29Z

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

abhishekdgeek · 2017-10-16T07:56:09Z

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

javilingt · 2017-10-16T10:58:54Z

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 · 2017-10-17T09:48:34Z

Badly need this fixed! Does someone have a workaround?

)

dottodot · 2017-10-17T11:41:33Z

This post suggests it not currently possible and a feature request needs submitting #2702

cyberabis · 2017-10-17T18:57:45Z

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

alexisAvenel · 2017-10-18T12:41:48Z

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 · 2017-10-18T18:14:09Z

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

LordAlastair · 2017-10-29T18:01:09Z

@alexisAvenel thank you!

abhishekdgeek · 2017-10-30T14:24:35Z

Any working workaround for template driven forms?

Thanks,
Abhishek.

joaofsilva · 2017-10-30T16:59:01Z

Above solution doesn't work for initial value?

abhishekdgeek · 2017-10-31T04:18:14Z

Yes @joaofsilva . :|

gbendandi · 2017-11-07T15:58:33Z

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 · 2017-11-08T14:30:59Z

the below steps will solve the issue

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

gbendandi · 2017-11-09T14:51:04Z

@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

select 'de' from locales dropdown.
select date from datepicker calendar. Note dd.mm.yyy format.
in the datepicker input type in 13.11.2017 (day > 12). Press enter.

expected: datepicker input should read 13.11.2017, 13th November 2017 should be selected on calendar.
actual: datepicker input is emptied, calendar selected date is not updated.

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

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

felikf · 2017-12-19T13:33:36Z

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 · 2017-12-20T09:15:59Z

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 · 2018-01-17T11:24:58Z

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 · 2018-01-19T11:09:33Z

You set date format for value via config or bsConfig property

jonasmedeiros · 2018-02-09T20:39:46Z

@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 · 2018-02-16T14:44:51Z

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 · 2018-04-06T05:55:54Z

<input class="form-control" type="text"
bsDatepicker [(bsValue)]="cusDob" value="{{ cusDob | date:'dd/MM/yyyy' }}"
/>
try this

manmohanagarwal4 · 2018-07-25T08:34:08Z

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 · 2018-12-03T07:34:16Z

Bump

karthiikramesh · 2019-01-09T05:28:38Z

@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 · 2019-01-21T17:43:33Z

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 · 2019-07-26T14:08:16Z

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 · 2020-01-16T13:36:07Z

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= '';
  }

}

PrashantSinghGour · 2023-10-11T07:05:46Z

for me issue is still there with bsDaterangepicker, it is working fine when we select the dates but while patching the value it is formatting to default MM/DD/YYYY.

this.bsConfig.rangeInputFormat = 'MM/YY';

any work around for this.

version - "ngx-bootstrap": "8.0.0"

Solution

I found simple workaround for this.

// get dateRangePicker Ref.
 @ViewChild(BsDaterangepickerDirective) bsDaterangepicker: BsDaterangepickerDirective;

// call setConfig after setting bsConfig.
this.bsConfig.rangeInputFormat = 'MM/YY';
   this.bsDaterangepicker.setConfig();

IlyaSurmay added the comp(datepicker) label Oct 9, 2017

pedroaraujo74 mentioned this issue Oct 12, 2017

BSDatePicker input #2827

Closed

aurerua mentioned this issue Oct 13, 2017

Cannot change locale with BsDatepicker #2842

Closed

KrzysztofJaneczko pushed a commit to KrzysztofJaneczko/ngx-bootstrap-temp-fix that referenced this issue Oct 17, 2017

Default date format change (related to valor-software/ngx-bootstrap#2809

a34de93

)

IlyaSurmay added effort2: medium (days) enhancement labels Nov 6, 2017

IlyaSurmay mentioned this issue Dec 8, 2017

Datepicker (german format): When typing a date, it swaps the month and day on focusout. #3233

Closed

tberge mentioned this issue Dec 21, 2017

Datepicker sets underlying value to null after manual entry on Firefox and Safari (Chrome works ok) #3337

Closed

valorkin added this to the v2.0.0-rc.2 milestone Jan 11, 2018

valorkin closed this as completed in 4f5fc18 Jan 11, 2018

IlyaSurmay mentioned this issue Jan 16, 2018

Datepicker error when date manually entering #3461

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BsDatepickerConfig dateInputFormat doesn't work when patching values manually. #2809

BsDatepickerConfig dateInputFormat doesn't work when patching values manually. #2809

pedroaraujo74 commented Oct 6, 2017 •

edited by valorkin

Loading

stiffold commented Oct 10, 2017

Nokhoneryu commented Oct 10, 2017

aurerua commented Oct 13, 2017

abhishekdgeek commented Oct 16, 2017

javilingt commented Oct 16, 2017

cyberabis commented Oct 17, 2017

dottodot commented Oct 17, 2017

cyberabis commented Oct 17, 2017

alexisAvenel commented Oct 18, 2017

stiffold commented Oct 18, 2017 •

edited

Loading

LordAlastair commented Oct 29, 2017

abhishekdgeek commented Oct 30, 2017

joaofsilva commented Oct 30, 2017

abhishekdgeek commented Oct 31, 2017

gbendandi commented Nov 7, 2017

konasunny commented Nov 8, 2017 •

edited

Loading

gbendandi commented Nov 9, 2017

felikf commented Dec 19, 2017

nathanchan01 commented Dec 20, 2017 •

edited

Loading

experionakash commented Jan 17, 2018

valorkin commented Jan 19, 2018

jonasmedeiros commented Feb 9, 2018

dottodot commented Feb 16, 2018 •

edited

Loading

Prmleo commented Apr 6, 2018

manmohanagarwal4 commented Jul 25, 2018 •

edited

Loading

startswithaj commented Dec 3, 2018

karthiikramesh commented Jan 9, 2019

ujjaldey commented Jan 21, 2019

fabriciobatalha commented Jul 26, 2019 •

edited

Loading

afeef1915 commented Jan 16, 2020 •

edited

Loading

PrashantSinghGour commented Oct 11, 2023 •

edited

Loading

BsDatepickerConfig dateInputFormat doesn't work when patching values manually. #2809

BsDatepickerConfig dateInputFormat doesn't work when patching values manually. #2809

Comments

pedroaraujo74 commented Oct 6, 2017 • edited by valorkin Loading

stiffold commented Oct 10, 2017

Nokhoneryu commented Oct 10, 2017

aurerua commented Oct 13, 2017

abhishekdgeek commented Oct 16, 2017

javilingt commented Oct 16, 2017

cyberabis commented Oct 17, 2017

dottodot commented Oct 17, 2017

cyberabis commented Oct 17, 2017

alexisAvenel commented Oct 18, 2017

stiffold commented Oct 18, 2017 • edited Loading

LordAlastair commented Oct 29, 2017

abhishekdgeek commented Oct 30, 2017

joaofsilva commented Oct 30, 2017

abhishekdgeek commented Oct 31, 2017

gbendandi commented Nov 7, 2017

konasunny commented Nov 8, 2017 • edited Loading

gbendandi commented Nov 9, 2017

felikf commented Dec 19, 2017

nathanchan01 commented Dec 20, 2017 • edited Loading

experionakash commented Jan 17, 2018

valorkin commented Jan 19, 2018

jonasmedeiros commented Feb 9, 2018

dottodot commented Feb 16, 2018 • edited Loading

Prmleo commented Apr 6, 2018

manmohanagarwal4 commented Jul 25, 2018 • edited Loading

startswithaj commented Dec 3, 2018

karthiikramesh commented Jan 9, 2019

ujjaldey commented Jan 21, 2019

fabriciobatalha commented Jul 26, 2019 • edited Loading

afeef1915 commented Jan 16, 2020 • edited Loading

PrashantSinghGour commented Oct 11, 2023 • edited Loading

Solution

pedroaraujo74 commented Oct 6, 2017 •

edited by valorkin

Loading

stiffold commented Oct 18, 2017 •

edited

Loading

konasunny commented Nov 8, 2017 •

edited

Loading

nathanchan01 commented Dec 20, 2017 •

edited

Loading

dottodot commented Feb 16, 2018 •

edited

Loading

manmohanagarwal4 commented Jul 25, 2018 •

edited

Loading

fabriciobatalha commented Jul 26, 2019 •

edited

Loading

afeef1915 commented Jan 16, 2020 •

edited

Loading

PrashantSinghGour commented Oct 11, 2023 •

edited

Loading