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

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


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


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?