Angular 8结合Moment.js设置日期选择器为YYYY-MM-DD格式问题

嘿，我来帮你捋清楚这个问题！首先得纠正一个小误解：原生的<input type="date">显示格式其实和Moment.js的默认格式没关系——它的显示样式是由用户的浏览器/操作系统区域设置决定的，比如美式区域会显示mm/dd/yyyy，而它实际绑定到ngModel的值始终是ISO 8601标准的yyyy-mm-dd格式。所以如果你只是担心提交或绑定的数据格式，其实已经是你想要的了，只是显示看起来不一样而已。

如果你的需求是必须让输入框的显示格式就是yyyy-mm-dd，那原生date输入框做不到，因为它的显示逻辑是系统级的。这时候可以用下面两种方法解决：

方法一：改用文本输入框+Moment自定义管道 #

1. 先创建一个自定义管道来处理日期格式化：

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({ name: 'yyyyMmDd' })
export class YyyyMmDdPipe implements PipeTransform {
  transform(date: Date | string): string {
    return moment(date).format('YYYY-MM-DD');
  }
}

记得在你的Angular模块里声明这个管道哦。

2. 修改HTML代码，用type="text"的输入框，结合双向绑定的格式化与解析：

<input 
  id="startDate" 
  name="startDate" 
  type="text" 
  [value]="report.startDate | yyyyMmDd"
  (input)="report.startDate = moment($event.target.value, 'YYYY-MM-DD').toDate()"
  required 
  #startDate="ngModel"
/>

3. 在组件类里导入Moment并暴露给模板：

import * as moment from 'moment';

// 组件类中添加
moment = moment;

方法二：配置Angular全局使用Moment作为日期适配器 #

如果你想让整个项目的日期处理都基于Moment，可以用Angular的Moment日期适配器：

1. 安装依赖：

npm install moment @angular/material-moment-adapter --save

2. 在app.module.ts中配置：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { MomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@NgModule({
  imports: [BrowserModule, FormsModule, MomentDateModule],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 然后用文本输入框配合Angular的date管道：

<input 
  id="startDate" 
  name="startDate" 
  type="text" 
  [value]="report.startDate | date:'yyyy-MM-dd'"
  (input)="report.startDate = moment($event.target.value, 'YYYY-MM-DD').toDate()"
  required 
  #startDate="ngModel"
/>

同样要在组件里暴露moment给模板。

最后再强调下：如果只是后端需要yyyy-mm-dd格式的数据，那原生date输入框绑定的值已经是这个格式了，不用改显示样式；只有当你必须让用户看到的就是yyyy-mm-dd时，才需要改用文本输入框的方案。

内容的提问来源于stack exchange，提问作者jadeite1000