在angular度2中设置material-datepicker的date格式
我是'angular2'和'angular js material'中的新成员。 我在我的项目中使用material-datepicker。
这是我的dateselect器代码
<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker> 它将显示在浏览器中，如下所示。
我关心的是date格式问题。 如何设置2017/04/27至2017年4月27日的date格式。
材料dateselect器正在使用时刻来格式化date，所以如果您只是给出该时刻的模式，您可以根据需要获取格式化的date。 [dateFormat]="'LL'"
您可以使用dateFormat选项指定MMMM DD YYYY标记，其中：
-
MMMM是名字月份 -
DD是一个月的日子 -
YYYY是今年
正如在文件中所述 。
你的代码将如下所示：
<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
在md datepicker的angular度2中，您可以更改date格式，如下所示：
创build一个扩展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]; } }
在您的应用程序模块中添加date格式常量：
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'}, } };
并在提供程序中添加date适配器和date格式：
providers: [ {provide: DateAdapter, useClass: DateAdapterComponent}, {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],