Angular ng-pick-datetime - отключение ввода на основе условия - PullRequest
Новая
       11

Angular ng-pick-datetime - отключение ввода на основе условия

1 голос
/ 30 октября 2019

Я работаю над 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 присоединяется к моему элементу ввода. Кажется, что элемент ввода отключен, но мы все еще можем редактировать элемент ввода вручную.

enter image description here

Здесь, когда мой «редактируемый» переменная ложна, я хочу отключить ввод даты. Если у кого-нибудь есть ответ, пожалуйста, помогите мне.

Я нашел вопрос, но не нашел ответа- Не удалось динамически отключить компонент ng-pick-datetime

Обновление

Найдите ссылку на стек для того же вопроса, который был задан выше. Я уже установил editable как false - Angular ng-pick-datetime - Отключить ввод на основе условия

1 Ответ

0 голосов
/ 06 ноября 2019

Я нашел ответ. Вам просто нужно добавить атрибут [readonly] = "true" к вашему входу. Это заставит его выбирать только дату, и вы не сможете его редактировать. 

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

Я отредактировал свой стек-блиц. Пожалуйста, проверьте ответ.

...