如何禁用datepicker输入框文本输入功能且不影响日历选择

你可以直接在原有的input标签上添加键盘事件拦截逻辑，仅阻止用户的键盘输入行为，完全不会影响日历点击选择、日期范围限制、双向绑定的原有功能。

修改后的HTML代码如下：

<div class="input-group">
    <span class="input-group-text" for="date">Date picker</span>
    <input type="date" class="form-control" id="date" [min]="minDate" [max]="maxDate" name="datePicker" [(ngModel)]="datePicker" (keydown)="$event.preventDefault()">
 </div>

可选兼容方案 #

如果需要同时禁止用户选中输入框内的日期文本，可以添加readonly属性，配合指针样式提示用户可点击触发日历，适配大部分现代浏览器：

<div class="input-group">
    <span class="input-group-text" for="date">Date picker</span>
    <input type="date" class="form-control" id="date" [min]="minDate" [max]="maxDate" name="datePicker" [(ngModel)]="datePicker" readonly style="cursor: pointer;">
 </div>

注意事项 #

• 两种方案都无需修改原有min、max配置和ngModel双向绑定逻辑
• 优先选择键盘拦截方案，对旧版本浏览器的兼容性更好，不会出现日历无法弹出的问题

内容的提问来源于stack exchange，提问作者Tuza Gordie