Question

我有一个使用Angular Material Datepicker的Angular 4.x应用程序（package.json将其显示为"@angular/material": "^2.0.0-beta.12"）-我的工作正常，但是我需要能够选择日期并保留日期选择器开放-此功能在Angular Material（v5.0.0）的后续版本中可用，但是这也意味着将我们本身的Angular版本从4升级到5（目前我们目前无法执行此操作）

如何修改代码以允许我：a）即使选择了日期，也保持日期选择器打开；或者b）一旦选择了日期，则立即重新打开日期选择器-使用此功能是否可能旧版本的材料

https://stackblitz.com/edit/angular-ysspzm-bz2ezu?file=app/datepicker-overview-example.ts

// HTML组件

<mat-datepicker-toggle
        matSuffix
        [for]="picker">
</mat-datepicker-toggle>

<mat-datepicker
        #picker
        class="fixed-open"
        opened="true">
</mat-datepicker>

//自定义日期选择器组件此处添加了进口...

@Component({
  selector: 'app-datepicker',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.scss']
})

export class DatepickerComponent {
  @ViewChild('keepOpen') _input: ElementRef;

  _openCalendar(picker: MatDatepicker<Date>) {
      picker.open();
  }
}

// node_modules目录中的datepicker.d.ts（我正在使用pastebin链接中的以下代码） https://pastebin.com/ChYBmpU6

Answer 1

这似乎在更改日期时有效，您可以将其重构为所需的任何事件类型。

组件

 @ViewChild('picker') picker;

  _openCalendar() {
   setTimeout(()=>this.picker.open());
  }

HTML

<input 
      matInput 
      [matDatepicker]="picker" 
      placeholder="Choose a date" 
      (dateChange)="_openCalendar()"
      #keepOpen>

选择日期时，如何保持日期选择器打开？

1 个答案: