Reputation: 1138
I am new in 'angular2' and 'angular js material'. I am using material-datepicker in my project.
This is my the date picker code
<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
It will be display in browser as shown below.
My concern is date format issue. How to set the date format from 2017/04/27 to April 27 2017.
Upvotes: 5
Views: 5434
Reputation: 1
In angular 2 for md datepicker, you can change the date format as below:
Create a component which extends NativeDateAdapter:
import { Component, OnInit } from '@angular/core';
import { NativeDateAdapter } from '@angular/material';
export class DateAdapterComponent extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
let day = date.getDate();
let month = date.getMonth();
let year = date.getFullYear();
if (displayFormat == "input") {
return this._toString(month) + ' '+ this._to2digit(day) + ',' + year;
} else {
return this._toString(month) + ' ' + year;
}
}
private _to2digit(n: number) {
return ('00' + n).slice(-2);
}
private _toString(n: number) {
let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return month[n];
}
}
Add a date format constant in your app module:
const MY_DATE_FORMATS:MdDateFormats = {
parse: {
dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
},
display: {
dateInput: 'input',
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
}
};
and in provider, add date adapter and date formats:
providers: [ {provide: DateAdapter, useClass: DateAdapterComponent},
{provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],
Upvotes: 0
Reputation: 31482
You can use dateFormat
option an specify MMMM DD YYYY
tokens where:
MMMM
is name monthDD
is day of the monthYYYY
is the yearas stated in the momentjs docs.
Your code will be like the following:
<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
Upvotes: 1
Reputation: 7621
Material date picker is using moment to format the date so if you just give the pattern that moment accept you can get the date formatted as you want. [dateFormat]="'LL'"
Upvotes: 0