Angular ng-pick-datetime - 根据条件禁用输入

Question

我正在开发 Angular 8，并且正在使用 ng-pick-datetime 插件。我希望禁用日期时间选择器以及根据条件动态触发它的输入元素。我试图搜索但找不到任何解决方案。以下是我的代码：-

<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" #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>

在上面尝试时，一个名为 owl-dt-trigger-disabled 的类会附加到我的输入元素。输入元素似乎被禁用了，但我们仍然可以手动编辑输入元素。

在这里，当我的 'editable' 变量为 false 时，我想禁用 datepicker 输入。如果有人有答案，请帮助我。

我发现了一个问题，但没有找到任何答案- Can't dynamically disabled ng-pick-datetime component

更新

请找到上述相同问题的 stackblitz 链接。我已经将 editable 设置为 false - Angular ng-pick-datetime - Disable the input based on a condition

Answer 1

要在 Angular (ng-version="6.1.10") 中禁用 ng-pick-datetime，请在输入字段中添加 'readonly' 和 'disabled' 属性，同时在 owl-date-time 中添加 'disabled' 属性。

<input [owlDateTimeTrigger]="dt3" formControlName="endDate" class="txtquestion date-field"
[owlDateTime]="dt3" [readonly]="data.disable" [disabled]="data.disable">

<owl-date-time [pickerType]="'calendar'" [disabled]="data.disable" #dt3></owl-date-time>

参考 - https://www.npmjs.com/package/ng-pick-datetime

Answer 2

我找到了答案。您只需在输入中添加一个属性 [readonly]="true"。这将使其仅选择日期，因此您无法对其进行编辑。

<input [readonly]="true" type="text"
 placeholder="DD MMM YYYY"
 id="date" [disabled]="!editable"
 [owlDateTimeTrigger]="date" [owlDateTime]="date"
 [min]="min" [max]="max">

我已经编辑了我的 stackblitz。请检查答案。