How to change the date format in the datepicker of Angular ngx-bootstrap inside a form

Question

Using ngx-bootstrap Datepicker in an Angular 4 application,

I know that normally you can specify the date format this way:

<input id="from" name="from"
       bsDatepicker [(bsValue)]="myModel"
       value="{{ myModel | date:'yyyy-MM-dd'}}">

but this time I'm inside a template-driven Angular form, so my input is not bound to a variable like myModel in the example above, but it's just bound to the form:

<input id="from" name="from"
       bsDatepicker ngModel>

so how can I specify the date format in this case?

Edit: it looks like that a way to achieve this is by creating a new variable newVar inside the component and then binding it with [(bsValue)]="newVar":

<input id="from" name="from"
       bsDatepicker ngModel
       [(bsValue)]="newVar"
       value="{{ newVar | date:'yyyy-MM-dd' }}">

However I wonder if there is a better solution.

Answer 1

[(bsValue)] is always available for use with bsDatepicker, will it be input field or not

if you want to change format of only one field then

[(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}" is fine

bsDatepicker has integration with input fields and forms, this should work for you:

<input name="from" bsDatepicker [(ngModel)]="newVar">

and you can globally change format of date in input's value via config

https://github.com/valor-software/ngx-bootstrap/blob/development/src/datepicker/bs-datepicker.config.ts#L31

or via [bsConfig]="{dateInputFormat: 'yyyy-MM-dd'}" on element with bsDatepicker

note: there is currently an issue (v1.9.2) with L format, it`s always uses en-us locale

Answer 2

If you are using Date range Picker Then you should use rangeInputFormat in [bsConfig] instead of dateInputFormat.

Answer 3

I have managed to fix the issue by using rangeInputFormat. For more reference i have created the dynamic reference and cross date range picker communication as well at

https://stackblitz.com/edit/ngx-daterangepicker

Answer 4

the best way that worked for me:

let minDate = new Date(valeur[0].getFullYear(), valeur[0].getMonth(), valeur[0].getDate(), 0, 0, 0, 0);
let maxDate = new Date(valeur[1].getFullYear(), valeur[1].getMonth(), valeur[1].getDate(), 23, 59, 59, 99);

let minDateISO = minDate.toISOString();
let maxDateISO = maxDate.toISOString();

`

Answer 5

I found simple workaround for dateRangePicker while patching the value.

component.html

  <input type="text"
        #dp="bsDaterangepicker"
        bsDaterangepicker [bsConfig]="bsConfig"
        [placeholder]="dataConfig?.selectedType?.placeHolder" readonly
        formControlName="dateOrPeriodRange">

component.ts

import { BsDaterangepickerDirective } from 'ngx-bootstrap/datepicker';
.
.
.
export class MyComponent implements OnInit {
// taking rangepicker reference
  @ViewChild(BsDaterangepickerDirective) bsDaterangepicker: BsDaterangepickerDirective;
.
.
.
//set bsConfig before patching value
this.bsConfig.rangeInputFormat = 'MM/YY';
// calling setConfig to update the config.
   this.bsDaterangepicker.setConfig();

the given example is for dateRangePicker for simple datePicker need to take different directive i,e. BsDatepickerDirective in viewChild.

Answer 6

Will you be able to elaborate on how to use this config file to use a global date format?

I went through the github link you provided above but was unable to figure out how to use that in my project because it has lot of import files. I'm currently using the below inline code to change the date format.

bsDatepicker [(bsValue)]="newVar" value="{{ newVar | date:'yyyy-MM-dd' }}"

Is there a method to put this date format 'yyyy-MM-dd' in a config file globally so that I can just print a date in any field of bsDatepicker without having a need to explicitly mention the format?