How to get custom date format value from NGX-Bootstrap datepicker

Question

I m using NGX-Bootstrap for my angular6 project. I have reactive form and added datepicker to it and while returning the value from datepicker getting full format ex: "2018-11-07T05:12:35.000Z". But I want in MM-DD-YYYY.

Answer 1

Before returning the date, convert the date format as the following:

let date = new Date(dateValue).toLocaleDateString();

then assign date to the form controller

Answer 2

to be more generic you can create a directive which returns the date in the format you want. for eg.

<input changeDateFormat type="text" placeholder="Datepicker" class="form-control" #dp="bsDatepicker" bsDatepicker [(bsValue)]="bsValue">

export class changeDateFormatDirective implements OnChanges {
@Input() bsValue: Date;
@Output() bsValueChange = new EventEmitter();

constructor(private cdr: ChangeDetectorRef) { }

ngOnChanges(changes: SimpleChanges) {
//change Date format here, you can import format date from @angular/common
this.bsValueChange.emit(newDateFormat);
this.cdr.detectChanges();
}
}