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

Question

我有一个反应形式，在其中我想使用角度材料日期选择器。 我已经使用(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);
  }

我一直在阅读一堆文档，但仍然无法弄清楚。 任何帮助是极大的赞赏。

Answer 1

尝试这个，

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

Answer 2

另一种方法：

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

Answer 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这对我2019-08-11 。
如果有人有任何其他建议，我仍然很高兴听到他们。

Answer 4

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

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

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

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

3. 定义提供者：

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

4. 创建自定义指令：

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);
  }
}

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

5. 最后使用模板中的指令在“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 的继任者）