Changing the Date Format in Reactive Forms: A Guide

Question

Changing the Date Format in Reactive Forms: A Guide

I need to update the date format displayed in my field within Reactive forms. Currently, it shows as "16-03-1999" but I want it to display as "March 16, 1999."

Here is the relevant code:

In my TypeScript file:

this.companyForms = this.fb.group({

})

I am dynamically adding a control to the form using API response:

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

In the 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>

While attempting to use the built-in pipe longDate to change the date format, it still displays as 'dd-mm-yyyy'. I want it in "mmmm dd, yyyy" (June 26, 2019) format.

The placeholder for the date field continues to show the default format of dd-mm-yyyy.

If anyone has suggestions on how to achieve the desired format, your input would be greatly appreciated. Thank you!

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

Answer 1

Answer №1

If you want to implement a datepicker in Angular, Angular Material is a great option to consider. Here is an example of how you can use Angular Material to create a datepicker:

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

Additionally, here is the TypeScript code required for this functionality:

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());
}

You can view a demo of this implementation on StackBlitz.

Answer 2

If you want to implement a datepicker in Angular, Angular Material is a great option to consider. Here is an example of how you can use Angular Material to create a datepicker:

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

Additionally, here is the TypeScript code required for this functionality:

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());
}

You can view a demo of this implementation on StackBlitz.

Answer 3

Answer №2

ng-bootstrap offers a convenient ngb-datepicker component that can be used in place of a standard input field. An example of how to format the date for this component can be found in the official documentation: custom date formatter.

Here is the code for the custom date parser formatter:

@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 : '';
  }
}

Answer 4

ng-bootstrap offers a convenient ngb-datepicker component that can be used in place of a standard input field. An example of how to format the date for this component can be found in the official documentation: custom date formatter.

Here is the code for the custom date parser formatter:

@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 : '';
  }
}

Changing the Date Format in Reactive Forms: A Guide

Answer №1

Answer №2

Similar questions

Utilizing properties from the same object based on certain conditions

Do I still need to install react-router if I have already installed @types/react-router?

How can you properly structure chainable functions in Angular?

The base URL specified in the tsconfig file is causing the absolute path to malfunction

Use the date-fns max function to identify the latest date in an array of date strings

AngularJS 2 TypeScript structure

Creating a bootstrap carousel configuration

Discovering action creator names using auto-complete in a React component: A step-by-step guide

What is the connection between @types, TypeScript, and Webpack?

Having issues with matSort functionality on mat-table in Angular

Angular2 Window Opener

Firebase is storing object values as 'undefined'

How to execute an object function in TypeScript only if it is defined

Obtain a collection of custom objects through an HTTP GET request to be utilized in an Angular 2 application

Testing a component in Angular 2 that utilizes the router-outlet functionality

The issue with the overlay not being properly shown in the Angular Material menu

Leveraging TypeScript to call controller functions from a directive in AngularJS using the "controller as"

Typescript function incorrectly returns Protractor's "element.all" output as Promise<string> instead of Promise<string[]>

Confused about how to implement lambda expressions in Angular 2?

Retrieve information from an XML document