Angular 8中ng-pick-datetime如何动态条件禁用输入框与选择器

我之前也碰到过类似的情况——ng-pick-datetime的[disabled]绑定只会禁用日期选择器的弹窗触发和选择功能，但输入框本身还是允许手动编辑。要实现editable为false时完全禁用输入框，你可以试试这两个方案：

方案一：结合readonly属性双重限制 #

给输入框添加[readonly]绑定，和[disabled]共用同一个!editable条件。这样既能阻止手动输入，又能让插件的禁用逻辑生效：

<input type="text" 
       style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box-shadow: 0 0 0 0 white !important;" 
       placeholder="DD MMM YYYY" 
       class="datepicker" 
       id="date" 
       [disabled]="!editable"
       [readonly]="!editable" <!-- 新增readonly绑定 -->
       #date 
       [owlDateTimeTrigger]="date" 
       [owlDateTime]="date" 
       [min]="min" 
       [max]="max">
<img alt="" src="./assets/images/datepicker.svg" style="position: relative; top: 6px; margin-right: 5px;" height="20px" width="20px;">
<owl-date-time [disabled]="!editable" [pickerType]="'calendar'" #date></owl-date-time>

readonly会锁定输入框的手动编辑权限，而[disabled]则负责禁用日期选择器的触发和弹窗操作，两者结合就能实现完全禁用的效果。

方案二：用CSS禁止交互（兜底方案） #

如果方案一的效果不够理想，可以通过CSS类来完全阻止输入框的交互行为：

1. 给输入框添加条件类绑定：

<input type="text" 
       ...
       [class.datepicker-disabled]="!editable" <!-- 新增条件类 -->
       ...>

2. 在组件样式里添加对应的CSS规则：

.datepicker-disabled {
  pointer-events: none; /* 阻止所有鼠标交互 */
  background-color: #e9ecef; /* 模拟原生禁用的灰色背景（可选） */
  color: #6c757d; /* 调整文字颜色（可选） */
}

这个方法会彻底禁用输入框的所有交互，包括点击触发选择器和手动输入，再配合[disabled]属性，就能确保完全锁定。

需要注意的是，两种方案都要保留owl-date-time组件上的[disabled]="!editable"绑定，确保日期选择器弹窗本身也被禁用。

内容的提问来源于stack exchange，提问作者Chetan Oswal