Set Date format for material-datepicker in angular 2

Question

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.

Which datepicker are you using? Can you link it? If you are using angular-material (angular 1.x) see [`$mdDateLocaleProvider`](https://material.angularjs.org/latest/api/service/$mdDateLocaleProvider) — VincenzoC, Apr 27 '17 at 08:46
@VincenzoC this is the link I am using https://www.pincer.io/npm/libraries/angular2-material-datepicker — Libin C Jacob, Apr 27 '17 at 09:20
Had you tried using `dateFormat` option? You can try adding `dateFormat="MMMM DD YYYY"` to your `` — VincenzoC, Apr 27 '17 at 09:28

VincenzoC · Answer 1 · 2017-04-28T13:17:50.207

1

You can use dateFormat option an specify MMMM DD YYYY tokens where:

MMMM is name month
DD is day of the month
YYYY is the year

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

edited Apr 28 '17 at 13:17

answered Apr 27 '17 at 09:49

VincenzoC

30,117
12
90
112

@LibinCJacob sorry about it, does the `placeholder` option work? Have you tried using `[dateFormat]="MMMM DD YYYY"` (adding square brackets)? – VincenzoC Apr 27 '17 at 11:13
By default, the date will be shown in YYYY-MM-DD (ISO 8601 standard). Other formats include MM-DD-YYYY and DD-MM-YYYY. I've read this from the following article. https://www.npmjs.com/package/angular2-material-datepicker – Libin C Jacob May 03 '17 at 12:25
@LibinCJacob if you look at the component [code](https://github.com/koleary94/Angular-2-Datepicker/blob/master/src/datepicker.component.ts#L496), it seems that it accepts any moment fomat token. Maybe is a version issue since `setInputText` method in `datepicker.component.ts` differ between `0.5.0` and `1.0.0`. – VincenzoC May 03 '17 at 21:32
@VincenzoC how to change output of datepicker from iso to something else, lets day toLocaleString() – Ankit Raonka Nov 14 '17 at 13:43

Jorawar Singh · Answer 2 · 2017-04-27T17:31:40.903

0

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

edited Apr 27 '17 at 17:31

answered Apr 27 '17 at 16:43

Jorawar Singh

7,463
4
26
39

how to change output of datepicker from iso to something else, lets day toLocaleString() – Ankit Raonka Nov 14 '17 at 13:43

score 0 · Answer 3 · edited Sep 20 '17 at 13:02

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}],

Set Date format for material-datepicker in angular 2

3 Answers3

Linked