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

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’;

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

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>

@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.

• 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.

1. 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)

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

Same problem, pls pls fix.

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

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

Any working workaround for template driven forms?

Thanks, Abhishek.

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.

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?

Yes @joaofsilva . 😐

Badly need this fixed! Does someone have a workaround?