Angular ng-pick-datetime-根据条件禁用输入 [英] Angular ng-pick-datetime - Disable the input based on a condition

问题描述

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

I'm working on Angular 8 and I'm using ng-pick-datetime plugin. I wish to disable the date time picker as well as the input element that triggers it based on a condition dynamically. I tried to search but couldn't find any solution. Following is my code:-

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

When tried above, a class termed owl-dt-trigger-disabled gets attached to my input element. It seems like the input element is disabled, but we can still edit the input element manually.

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

Here, when my 'editable' variable is false, I want to disable the datepicker input. If anyone have an answer, please help me.

我找到了一个问题，但没有找到答案- 无法动态禁用ng-pick-datetime组件

I found a question but didn't find any answer- Can't dynamically disabled ng-pick-datetime component

更新

对于上述相同问题，请找到stackblitz链接.我已经将可编辑设置为false- 角度ng-pick -datetime-根据条件禁用输入

Please find the stackblitz link for the same question asked above. I have already set editable as false - Angular ng-pick-datetime - Disable the input based on a condition

推荐答案

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

I have found the answer. You just need to add an attribute [readonly]="true" to your input. That will make it select only the date and so you cannot edit it.

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

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

I have edited my stackblitz. Please check the answer.

这篇关于Angular ng-pick-datetime-根据条件禁用输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！