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>

为了解释提供的一些属性，如果我在第一个datepicker（FromDate）中选择日期，那么第二个datepicker将从此日期开始。

感谢您的帮助：）

Answer 1

您可以使用open方法在datepicker或[{1}}代码中的focus打开click对话框。

要禁用键盘输入，请添加事件处理程序input

(keydown)="false"

如果您需要更多参考，可以看到此demo

Angular - MdDatepicker不能完全按预期工作

1 个答案: