Angular

Question

我正在使用来自@angular/material 的两个日期选择器（第一个代表 "FromDate"，第二个代表 "ToDate"

我按照 Angular Material 团队在他们网站上提供的说明设法实现了它，但我找不到方法： - 单击输入字段时，应显示日历（不仅仅是通过单击图标） - 避免用户在输入字段中键入任何内容

对于第一个问题，他们的网站上没有关于这个用例的任何内容，我什至尝试玩 focus 属性但没有成功。对于第二个问题，我找到的唯一方法是 disable 输入字段（但这对我来说不是解决方案）

这是我 HTML 中的内容：

<div class="input-group">
    <input mdInput [mdDatepicker]="datepickerFrom" [max]="endDate">
    <button mdSuffix [mdDatepickerToggle]="datepickerFrom"></button>
    <md-datepicker #datepickerFrom [startAt]="startDate" (selectedChanged)="onSelectStartDate($event)"></md-datepicker>
</div

<div class="input-group">
     <input mdInput [mdDatepicker]="datepickerEnd" [min]="startDate" [disabled]="true" [max]="endDate">
     <button class="input-group-addon" [mdDatepickerToggle]="datepickerEnd"></button>
     <md-datepicker #datepickerEnd [startAt]="startDate" (selectedChanged)="onSelectEndDate($event)"></md-datepicker>
</div>

解释一下提供的一些属性，如果我select第一个日期选择器（FromDate）中有一个日期，那么第二个日期选择器就会从这个日期开始。

感谢您的帮助:)

Answer 1

您可以使用 open 方法在 input 标签中的 focus 或 click 上打开 datepicker 对话框。

要禁用键盘输入，请添加事件处理程序(keydown)="false"

<div class="input-group">
    <input mdInput [mdDatepicker]="datepickerFrom" [max]="endDate" (click)="datepickerFrom.open()" (keydown)="false">
    <button mdSuffix [mdDatepickerToggle]="datepickerFrom"></button>
    <md-datepicker #datepickerFrom [startAt]="startDate" (selectedChanged)="onSelectStartDate($event)"></md-datepicker>
</div

<div class="input-group">
     <input mdInput [mdDatepicker]="datepickerEnd" [min]="startDate" [disabled]="true" [max]="endDate" (click)="datepickerEnd.open()" (keydown)="false">
     <button class="input-group-addon" [mdDatepickerToggle]="datepickerEnd"></button>
     <md-datepicker #datepickerEnd [startAt]="startDate" (selectedChanged)="onSelectEndDate($event)"></md-datepicker>
</div>

如果需要更多参考，可以看这个demo

Angular - MdDatepicker 未完全按预期工作

Angular - MdDatepicker not working exactly as expected

datepicker

angular-material2