CODEWITHSUNDEEP
angulardateangular-materialdaterangepicker
zerocewl
zerocewl

Reputation: 12784

How to change the date format of Angular material date range picker?

How to change the date format to a custom one in Angular materials date range picker?

E.g. for a another date format: DD/MM/YYYY

Basic date range picker:

    <mat-form-field appearance="fill">
      <mat-label>Enter a date range</mat-label>
      <mat-date-range-input [rangePicker]="picker">
        <input matStartDate placeholder="Start date">
        <input matEndDate placeholder="End date">
      </mat-date-range-input>
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-date-range-picker #picker></mat-date-range-picker>
    </mat-form-field>

Basic date range picker as Stackblitz.

Upvotes: 7

Views: 15083

Answers (3)

Jeff
Jeff

Reputation: 11

you can use template literals to convert to short date format "YYYY-MM-DD" after receiving value from angular datepicker.

let due_date = this.form.get('due_Date').value

due_date = ${due_date._i.year}-${due_date._i.month + 1}-${due_date._i.date}

since you want "DD/MM/YYYY" then use

due_date = ${due_date._i.date}/${due_date._i.month + 1}/${due_date._i.year}

ignore the last ` tick as I don't how to remove in this editor

Upvotes: 0

Brad
Brad

Reputation: 512

As per the official documents found here with a few minor tweaks: Found Here

Add the following to your app.module.ts / main module file imports section (View the display formats Here):

    import { MatNativeDateModule, DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
    import { MomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
        export const MY_FORMATS = {
          parse: {
            dateInput: 'LL',
          },
          display: {
            dateInput: 'LL',
            monthYearLabel: 'MMM YYYY',
            dateA11yLabel: 'LL',
            monthYearA11yLabel: 'MMMM YYYY',
          },
        };
    
        @NgModule({
          imports: [
        
          MatDatepickerModule,
          MatNativeDateModule,
          MomentDateModule,
        ],
        ....

Add the following to your providers section in your app.module.ts / main module

providers: [
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
  ],

Make sure to install moment.js:

npm install moment --save

In your component import the following:

import * as moment from 'moment';

In your component (reactive forms) bind your input fields, note the moment(your_start_date):

this.theForm = this.formBuilder.group({
      startDate: [moment(this.service.filter.startDate), [Validators.required]],
      endDate: [moment(this.service.filter.endDate), [Validators.required]]
      })
    });

Add this to your Template

    <mat-form-field>
           <mat-label>Date Range</mat-label>
           <mat-date-range-input [rangePicker]="dateRangePicker" >
                <input matStartDate formControlName="startDate" placeholder="Start date">
                <input matEndDate formControlName="endDate" placeholder="End date">
           </mat-date-range-input>
           <mat-datepicker-toggle matSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
           <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
   </mat-form-field>

Upvotes: 1

saumil_
saumil_

Reputation: 323

It's pretty simple. First of all in your component import following.

import { NativeDateAdapter, MatDateFormats } from '@angular/material';
import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core';

Now Create one class 'AppDateAdapter' which extends NativeDateAdapter. See following

export class AppDateAdapter extends NativeDateAdapter {
      format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
  let day: string = date.getDate().toString();
  day = +day < 10 ? '0' + day : day;
  let month: string = (date.getMonth() + 1).toString();
  month = +month < 10 ? '0' + month : month;
  let year = date.getFullYear();
  return `${day}-${month}-${year}`;
}
return date.toDateString();
}}

Create const APP_DATE_FORMATS

    export const APP_DATE_FORMATS: MatDateFormats = {
   parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' },
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'numeric' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric'
    },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};

In your component add provider

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.css"],
  providers: [
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}
  ]
})

Now whenever you change the date from datepicker than it will display in "dd-mm-yyyy" format because we have declared the format in AppDateAdapter. You can change that.

Upvotes: 9

Related Questions