ngx-bootstrap's datepicker format value in reactive forms

Question

I am working with this example: https://valor-software.com/ngx-bootstrap/#/datepicker#reactive

As you see the value of {{ Form.value }} for 'date' is in the format "date": "2017-10-14T17:38:53.000Z", How it is posible to change that to "14/10/2017" as example, because that format is not passing my regex validation!

I have tried playing around with the code example and I also read all the documentation about DatePicker Module but I wasn't able to figured out how to do it!

Answer 1

You can use normal javascript date format method. When you select a date, trigger an event and format the date. Finally set the formatted date to the formControlName.

ForExample:

dateFormat("Fri Dec 01 2017 14:41:37 GMT+0530 (India Standard Time)");

dateFormat(date:any){
    let date = new Date(date),
    let month = ("0" + (date.getMonth()+1)).slice(-2),
    let day  = ("0" + date.getDate()).slice(-2);
    let formattedDate=[day,month,date.getFullYear()].join("/");
    this.formName.patchValue({
      date:formattedDate }) 
}