Question

关于角度材料的官方文档，datepicker组件提供了两个输出，如果打开日期选择器（openedStream）或关闭（closedStream）（{{3} }）。

如果我打开并关闭日期选择器，我从这些事件中得不到任何内容，我的<div>{{ message }}</div>仍为空，并且没有显示任何值。

我的实际设置

＆＃13;

export class NoteCreateComponent {
  public message = "";
  
  constructor(){}
  
  toggleDatePicker(picker){
      picker.open();
  }
}

＆＃13;

<div>{{ message }}</div>
<button (click)="toggleDatePicker(picker)" mat-icon-button>
<mat-datepicker 
    (openedStream)="message=$event"
    (closedStream)="message=$event" #picker>
</mat-datepicker>

＆＃13;

预期结果我们打开或关闭日期选择器（不仅仅是点击按钮）我得到了反馈。

Answer 1

<mat-datepicker 
(opened)="streamOpened()" 
(closed)="streamClosed()" #picker> 
</mat-datepicker>

您不应使用openedStream和closedStream事件名称，因为它们是DatePicker组件的内部字段名称。使用opened和closed。看看MatDatePicker的文件记录：

@Output('closed') closedStream: EventEmitter<void>
@Output('opened') openedStream: EventEmitter<void>

Answer 2

由于openStream和closedStream没有发出值，因此无法获取$ event值并将其设置为消息变量。

你可以尝试这段代码：

<div>{{ message }}</div>
<button (click)="toggleDatePicker(picker)" mat-icon-button>
<mat-datepicker 
    (openedStream)="streamOpened()" 
    (closedStream)="streamClosed()" #picker>
</mat-datepicker>

<。>在.ts文件中

...
streamOpened() {
   this.message = 'Stream Opened';
}

streamClosed() {
   this.message = 'Stream Closed';
}
...

Answer 3

我认为答案是[打开]的输入属性

<mat-datepicker 
    #planDatepicker
    [opened]="open()">

angular datepicker docs

Answer 4

这对我有用：

<input 
        type="hidden"
        id="selectedDateInput"
        #selectedDateInput
        [matDatepicker]="myDatepicker"
        [min]="minDate"
        [max]="maxDate"
        (dateChange)="dateUpdated(myDatepicker, this)">
      <mat-datepicker-toggle [for]="myDatepicker"></mat-datepicker-toggle>
      <mat-datepicker #myDatepicker 
        (nextClicked)="nextClicked(myDatepicker, $event, this)" 
        (previousClicked)="previousClicked(myDatepicker, $event, this)"
        (selectedChanged)="getMonth(myDatepicker, $event, this)"
        (opened)="calIsOpened(this)">
      </mat-datepicker>

Angular Material Datepicker open- and closeStream

4 个答案: