Ngx-bootstrap: Datepicker Format

[porf25]

Trying to figure out how to change the format of the selected dates to something like "08/24/2016"

What I keep getting is something like this:
Wed Aug 24 2016 00:00:00 GMT-0400 (Eastern Daylight Time)

Anyone know how to change it?

[hggeorgiev]

Applying the DatePipe to your model should help.

[mhov]

[(ngModel)]="something" is a two-way binding. So it's actually trying to assign the new value back to policy.effective | date: 'shortDate' which doesn't make sense.

[mhov]

You effectively want a one-way binding since nothing can be written TO effectiveDate. [ngModel]="effectiveDate" (no parenthesis) would be more appropriate.

[washingtong33k]

Sorry to open this thread again. But did anyone find a way to format the date using reactive forms?

[pbouda]

@washingtonphp As a workaround I use a separate input that toggles the datepicker and shows the formatted date. I then set the bsDatepicker field to hidden:

<input
  type="text"
  class="form-control"
  bsDatepicker
  #newDateControl
  [style.visibility]="'hidden'"
  [formControl]="newOptionDate">
<input
  type="text"
  class="form-control"
  (focus)="newDateControl.toggle()"
  [value]="newOptionDate.valueChanges | async | date:'mediumDate'">

[mrajaraman]

Is there any way to store only MM/dd/yyyy in my ngModel using new bsDatepicker? Than the full date.

[RodrigoBastos22]

app.component.ts

import {formatDate} from '@angular/common';

submit() {
const date = new Date(this.date);
this.date = formatDate(date, 'MM/dd/yyyy', 'en');
console.log(this.date);
}