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 的类将附加到我的输入元素上。似乎输入元素已被禁用，但我们仍然可以手动编辑输入元素。

在这里，当我的“可编辑” 变量为false时，我想禁用日期选择器输入。如果有人有答案，请帮助我。

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

更新

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

Answer 1

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

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

我已经编辑了我的堆叠闪电战。请检查答案。

Answer 2

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

owl-date-time

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