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.

score 27 · Accepted Answer · answered Sep 12 '17 at 21:38

[(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

be aware of this issue https://github.com/valor-software/ngx-bootstrap/issues/2809 — Felix, Dec 19 '17 at 20:31
@valorkin as of version 2.0 I had to use `'YYY-MM-DD'` instead of `'yyyy-MM-dd'` — Francesco Borzi, Jan 23 '18 at 16:29

score 7 · Answer 2 · answered Jul 25 '18 at 08:37

7

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

answered Jul 25 '18 at 08:37

MANMOHAN

71
1
2

1

I had Fixed by this option – MANMOHAN Jul 25 '18 at 08:40
I can confirm that this works perfectly with a Date Range Picker, took me a while to find this solution! – connectedsoftware Dec 07 '18 at 14:34
Yes this is the way – MANMOHAN Jul 07 '21 at 07:25
I can confirm that this works perfectly with a Date Range Picker, took me a while to find this solution! – MANMOHAN Jul 07 '21 at 07:32
THANK YOU, I was trolled by the documentation. – Ap0st0l Jun 09 '22 at 09:55

score 4 · Answer 3 · answered Jan 24 '18 at 06:34

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?

score 0 · Answer 4 · answered Jul 23 '22 at 17:37

0

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

answered Jul 23 '22 at 17:37

Sachin Mishra

1,125
1
16
17

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

4 Answers4

Linked