How to change the format of Date in Reactive Forms?

user_11543918 0
Viewed 1344

I want to change the default date format in one of my fields in Reactive forms. It is appearing in the following format "16-03-1999" but I want to change in following format "March 16, 1999".

Below is the code for the same :

In type script file :

this.companyForms = this.fb.group({

})

I am adding the control dynamically in the form using the response of API

this.companyForms.addControl("EFFECTIVE_DATE", new FormGroup({
        'DEFAULT VALUE': new FormControl(null)
}))

In html file,

<form [formGroup]="companyForms">
   <div class="row pt-2" formGroupName="EFFECTIVE_DATE">
      <input type="date" class="form-control bg-light" name="DEFAULT VALUE" formControlName="DEFAULT VALUE" [value]="companyForms.get(['EFFECTIVE_DATE','DEFAULT VALUE'])| date:'longDate' ">
   </div>
</form>

I am trying to change the format of the date by using built in pipe longDate which is basically used to convert the date format into desired format. But after applying pipe also it is appearing in the same format 'dd-mm-yyyy'. I want it in "mmmm dd, yyyy" (June 26, 2019) format.

The date field still showing the default format in placeholder that is dd-mm-yyyy.

Any suggestions regarding this will be helpful. Thanks in advance.

angular-reactive-forms ng-bootstrap bootstrap-4 angular typescript
2 Answers

You can Use Angular Material. It has this format (June 26, 2019) html

<mat-form-field appearance="fill">
  <mat-label>datepicker</mat-label>
  <input matInput [matDatepicker]="dp" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

ts

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
import {MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
import * as _moment from 'moment';
import {default as _rollupMoment} from 'moment';

const moment = _rollupMoment || _moment;
export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};
@Component({
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },
    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],
})
export class DatepickerFormatsExample {
  date = new FormControl(moment());
}

demo in stackblitz

user_123368820

ng-bootstrap provide a ngb-datepicker component. You can use it instead of the input. Here is the example from the official docs on how to format the date for this component: custom date formatter.

Code of the formatter itself:

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter {

  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null {
    if (value) {
      let date = value.split(this.DELIMITER);
      return {
        day : parseInt(date[0], 10),
        month : parseInt(date[1], 10),
        year : parseInt(date[2], 10)
      };
    }
    return null;
  }

  format(date: NgbDateStruct | null): string {
    return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
  }
}
user_3901610
Related