角反应形式材料日期选择器手动输入格式DD/MM/YYYY
Posted
技术标签:
【中文标题】角反应形式材料日期选择器手动输入格式DD/MM/YYYY【英文标题】:Angular reactive Form material Date picker manual input format DD/MM/YYYY 【发布时间】:2020-02-21 18:27:47 【问题描述】:我想更改 datePicker 的输入格式,默认是 MM/DD/YYYY 我想将其更改为 DD/MM/YYYY。 html代码:
<mat-form-field>
<mat-label>Date de creation min</mat-label>
<input formControlName="dateDebut" matInput [matDatepicker]="pickerCreationMin"
placeholder="jj/mm/aaaa">
<mat-datepicker-toggle matSuffix [for]="pickerCreationMin"></mat-datepicker-toggle>
<mat-datepicker #pickerCreationMin></mat-datepicker>
</mat-form-field>
格式选择器.ts
import NativeDateAdapter from '@angular/material';
import MatDateFormats from '@angular/material/core';
export class AppDateAdapter extends NativeDateAdapter
format(date: Date, displayFormat): 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();
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' ,
;
但是当我使用 DD/MM/YYYY 格式手动输入日期时,我收到无效日期错误 例如:24/08/2019
【问题讨论】:
【参考方案1】:这里是另一个版本的 AppDateAdapter:
export class AppDateAdapter extends NativeDateAdapter
parse(value: any): Date | null
if ((typeof value === 'string') && (value.indexOf('/') > -1))
const str = value.split('/');
const year = Number(str[2]);
const month = Number(str[1]) - 1;
const date = Number(str[0]);
return new Date(year, month, date);
const timestamp = typeof value === 'number' ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
format(date: Date, displayFormat: string): string
if (displayFormat == "input")
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
else if (displayFormat == "inputMonth")
let month = date.getMonth() + 1;
let year = date.getFullYear();
return this._to2digit(month) + '/' + year;
else
return date.toDateString();
private _to2digit(n: number)
return ('00' + n).slice(-2);
export const APP_DATE_FORMATS =
parse:
dateInput: month: 'short', year: 'numeric', day: 'numeric'
,
display:
dateInput: 'input',
monthYearLabel: 'inputMonth',
dateA11yLabel: year: 'numeric', month: 'long', day: 'numeric',
monthYearA11yLabel: year: 'numeric', month: 'long',
【讨论】:
这对我有用,但我应该在每个模块中添加提供者:[ provide: DateAdapter, useClass: AppDateAdapter, provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS, ],不仅在根模块中 【参考方案2】:import * as moment from 'moment';
const momentDateDebut = new Date(this.dateDebut)
const formattedDateDebut = moment(momentDateDebut).format("DD/MM/YYYY");
【讨论】:
你怎么知道他是否在使用时刻?? 我没有任何问题可以使用时刻,但我们的用户以这种格式“DD/MM/YYYY”写入日期,默认验证器采用这种格式“MM/DD/YYYY”以上是关于角反应形式材料日期选择器手动输入格式DD/MM/YYYY的主要内容,如果未能解决你的问题,请参考以下文章
JXDatePicker 使用 SimpleDateFormat 将 dd.MM.yy 格式化为当前世纪的 dd.MM.yyyy