Question

我正在使用的应用程序需要一个日期选择器。我从这里https://material.angular.io/components/datepicker/overview选择了一个。我在datepicker组件中插入的代码取自更改datepicker颜色下的内容。

datepicker.ts

import {Component} from '@angular/core';

/** @title Datepicker palette colors */
@Component({
  selector: 'datepicker-color-example',
  templateUrl: 'datepicker-color-example.html',
  styleUrls: ['datepicker-color-example.css'],
})
export class DatepickerColorExample {}

datepicker.html

<mat-form-field color="accent">
  <mat-label>Inherited calendar color</mat-label>
  <input matInput [matDatepicker]="picker1">
  <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
  <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field color="accent">
  <mat-label>Custom calendar color</mat-label>
  <input matInput [matDatepicker]="picker2">
  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
  <mat-datepicker #picker2 color="primary"></mat-datepicker>
</mat-form-field>

现在，我想捕捉用户选择的值。但是我不知道该怎么做。该事件如何在这里发出？

Answer 1

尝试(dateChange)事件

<mat-form-field>
  <input matInput
    [matDatepicker]="picker"
    placeholder="Different locale"
    (dateChange)="setDate($event.value)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<p>{{ date }}</p>

here is a demo code

无法从组件获取发射值

1 个答案: