角 - MdDatepicker不完全按预期工作

Question

我用两个datepickers从@角/材料来（第一个代表“FROM日期”，第二个代表“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> 

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

谢谢您的帮助:)

Answer 1

可以使用open方法在input标签打开focus或clickdatepicker对话框。

要禁用键盘输入，添加事件处理程序(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