如何从 Angular Material Datepicker 中仅提取日期答案

【问题标题】：How to Extract just the Date from Angular Material Datepicker如何从 Angular Material Datepicker 中仅提取日期
【发布时间】：2019-12-22 21:33:55
【问题描述】：

我有一个反应形式，我想在其中使用角度材料日期选择器。我已经使用(dateChange) 从日期选择器中提取了值，但它本身的值属于object 类型，并且包含的内容远远超出了我的需要。 Sun Aug 11 2019 00:00:00 GMT-0400 (Eastern Daylight Time)

是否可以只获取月、日和年Aug 11 2019 而没有其他信息？

HTML

 <mat-form-field>
   <input matInput [matDatepicker]="dp" placeholder="Choose a date (dateChange)="updateDOB($event)" disabled>
   <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
   <mat-datepicker touchUi #dp disabled="false"></mat-datepicker>
 </mat-form-field>

TS（目前很简单）

updateDOB(dateObject) {
    console.log(dateObject.value);
  }

我一直在阅读大量文档，但仍然无法弄清楚。非常感谢任何帮助。

【问题讨论】：

标签： html typescript datepicker angular-material angular8

【解决方案1】：

试试这个，

updateDoB(dateObject){
 console.log("DATE in dd/mm/yyyy",dateObject.toLocaleDateString())
}

【讨论】：

已启用实时重新加载。 core.js:5882 错误类型错误：dateObject.toLocaleDateString 不是函数

【解决方案2】：

另一种方法：

dateObject.value.toLocaleString().substring(1, 10)

【讨论】：

【解决方案3】：

-更新-

我能够想出一个解决这个问题的方法。我将对象值字符串化，然后修剪字符串以仅包含日期。

updateDOB(dateObject) {
    // convert object to string then trim it to yyyy-mm-dd
    const stringified = JSON.stringify(dateObject.value);
    const dob = stringified.substring(1, 11);
    this.applicant.contact[0].dob = dob;
  }

结果现在出现在2019-08-11，这对我有用。
如果有人有任何其他建议，我仍然很乐意听到他们的建议。

【讨论】：

this.applicant 是什么？
这只是一个 JSON 对象，其中包含有关申请人的信息

【解决方案4】：

我有一个非常相似的问题。我使用 MomentDateAdapter 和自定义指令解决了它。我采取的步骤：

安装 @angular/material-moment-adapter 和 moment.js
添加日期格式配置：

export const DATE_FORMATS = {
  parse: {
    dateInput: ['MMM DD yyyy']
  },
  display: {
    dateInput: 'MMM DD yyyy',
    monthYearLabel: 'MMM yyyy',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM yyyy',
  },
};

第一个'dateInput'很重要你应该如何输入日期（例如使用键盘）才能成功解析。第二个“dateInput”很重要，用什么格式来显示日期。

定义提供者：

    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS }

创建自定义指令：

import {
  Directive,
  EventEmitter,
  HostListener,
  Input,
  Output,
} from '@angular/core';

@Directive({
  selector: '[setOutputDateFormat]',
})
export class DateFormatDirective {
  @Input('setOutputDateFormat')
  inputFormat = null;

  @Output()
  dateChangeWithFormat = new EventEmitter<string>();

  constructor() {}

  @HostListener('dateChange', ['$event'])
  onDateChange(event: any) {
    const dateFormatted = event.value.format(this.inputFormat);
    this.dateChangeWithFormat.emit(dateFormatted);
  }
}

Directive 监听 'dateChange' 事件，event.value 属性应该在 moment 对象中包含日期（因为我们在开始时切换到 MomentDateAdapter），因此指令将格式切换为所需的格式并以所需的格式触发自定义事件

最后使用模板中的指令在“outputDateFormat”属性中提供自定义格式：

<mat-form-field>
  <input
    matInput
    [setOutputDateFormat]="outputDateFormat"
    [matDatepicker]="dp"
    placeholder="Choose a date"
    (dateChangeWithFormat)="updateDOB($event)"
    
  />
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker touchUi #dp disabled="false"></mat-datepicker>
</mat-form-field>

此处示例：https://stackblitz.com/edit/angular-ivy-beufcw?file=src/app/app.component.ts

现在看来 moment.js 项目具有遗留状态，因此更好的解决方案是切换到 luxon 日期适配器（应该不难，因为 luxon 是 moment.js 的继任者）

【讨论】：