1

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>

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.

enter image description here

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

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

Update

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

Chetan Oswal
  • 430
  • 9
  • 21

2 Answers2

1

To disable ng-pick-datetime in Angular (ng-version="6.1.10"), add 'readonly' & 'disabled' attribute in input field, and the same time add 'disabled' attribute in owl-date-time.

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

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

Pinaki
  • 792
  • 8
  • 17
-1

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.

Chetan Oswal
  • 430
  • 9
  • 21
  • readonly not working, it will open calender and editable. code - `` – Pinaki Feb 08 '21 at 05:52
  • Did you check what is in your `data.disable`? Either way, you don't want your textbox to be maually editable. So, directly set `[readonly]="true"`. – Chetan Oswal Feb 08 '21 at 06:28
  • `data.disable` is `true` from API – Pinaki Feb 08 '21 at 08:00
  • I guess we are both talking about 2 different things. Using `[readonly]="true"`, the calendar will open. My issue was that I was able to type any text inside the textbox (please refer my posted image). If you don't want to open the calendar, you need to try this - ``. Add `[disabled]="data.disable"` in the owl-date-time tag. – Chetan Oswal Feb 08 '21 at 08:08