在日期选择器的事件发射器中发射日期对象

Question

我有一个自定义日期选择器子组件，其中 onDateChange 事件，我想向父组件发出一个事件。

@Output() selectedDateChange = new EventEmitter<Date>();
onDateChange($event) {
    this.selectedDateChange.emit($event); //$event has proper Date Value
}

在父组件中，在我的 html 中，我有

<app-custom-date (selectedDateChange) = "onSomeTestMethod($event")> </app-custom-date>

并在 TS

someAttrib: Date;
onSomeTestMethod($event) {
   this.someAttrib = $event; //type of $event is Object but has proper data
}

我在将对象类型的 $event 转换为 Angular 中的日期时遇到问题

Answer 1

当我使用 date 类型的输入时，我得到了它的值，它是一个字符串，然后我将字符串值解析为日期检查此示例

客户日期

<input  type="date" #v (change)="onDateChange(v.value)" />

成分

  @Output() selectedDateChange = new EventEmitter<Date>();

  onDateChange(value) {        
    this.selectedDateChange.emit( new Date(value));
  }

应用组件

模板

<app-custom-data (selectedDateChange)="log($event)"></app-custom-data>

成分

  log(value){
    console.log(typeof value); // object
    console.log( value instanceof Date); // true value is a date object
    console.log(value)
  }

演示🔥🔥