在角度 2 中设置材料日期选择器的日期格式答案

【问题标题】：Set Date format for material-datepicker in angular 2在角度 2 中设置材料日期选择器的日期格式
【发布时间】：2017-04-27 07:51:06
【问题描述】：

我是“angular2”和“angular js material”的新手。我在我的项目中使用材料日期选择器。

这是我的日期选择器代码

<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

如下图所示在浏览器中显示。

我担心的是日期格式问题。如何设置从 2017/04/27 到 2017 年 4 月 27 日的日期格式。

【问题讨论】：

您使用的是哪个日期选择器？可以链接吗？如果您使用 angular-material (angular 1.x)，请参阅 $mdDateLocaleProvider
@VincenzoC 这是我正在使用的链接pincer.io/npm/libraries/angular2-material-datepicker
您是否尝试过使用dateFormat 选项？您可以尝试将dateFormat="MMMM DD YYYY" 添加到您的<material-datepicker>

标签： node.js angular material-design

【解决方案1】：

您可以使用dateFormat 选项指定MMMM DD YYYY 令牌，其中：

MMMM 是月份
DD 是一个月中的哪一天
YYYY 是年份

如momentjs docs中所述。

您的代码将如下所示：

<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>

【讨论】：

@LibinCJacob 对此感到抱歉，placeholder 选项有效吗？您是否尝试过使用[dateFormat]="MMMM DD YYYY"（添加方括号）？
默认情况下，日期将显示为 YYYY-MM-DD（ISO 8601 标准）。其他格式包括 MM-DD-YYYY 和 DD-MM-YYYY。我从下面的文章中读到了这一点。 npmjs.com/package/angular2-material-datepicker
@LibinCJacob 如果您查看组件code，它似乎接受任何时刻格式令牌。可能是版本问题，因为datepicker.component.ts 中的setInputText 方法在0.5.0 和1.0.0 之间存在差异。
@VincenzoC 如何将 datepicker 的输出从 iso 更改为其他内容，让 day toLocaleString()

【解决方案2】：

材料日期选择器使用时刻来格式化日期，所以如果你只是给出那个时刻接受的模式，你可以得到你想要的日期格式。 [dateFormat]="'LL'"

【讨论】：

如何将 datepicker 的输出从 iso 更改为其他内容，让 day toLocaleString()

【解决方案3】：

在 md datepicker 的 angular 2 中，您可以更改日期格式如下：

创建一个扩展 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];
    } 
}

在您的应用模块中添加日期格式常量：

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'},
    }
};

在提供者中，添加日期适配器和日期格式：

  providers: [ {provide: DateAdapter, useClass: DateAdapterComponent},
               {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],

【讨论】：