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.

Solution 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

Solution 2

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

Solution 3

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?

Comments

[Felix]

be aware of this issue github.com/valor-software/ngx-bootstrap/issues/2809

[Francesco Borzi]

@valorkin as of version 2.0 I had to use 'YYY-MM-DD' instead of 'yyyy-MM-dd'

[Admin]

I had Fixed by this option

[connectedsoftware]

I can confirm that this works perfectly with a Date Range Picker, took me a while to find this solution!

[Admin]

Yes this is the way

[Admin]

I can confirm that this works perfectly with a Date Range Picker, took me a while to find this solution!

[Ap0st0l]

THANK YOU, I was trolled by the documentation.