Блог

Главная - Вопросы по программированию - Проблема выбора времени материала в угловой

Проблема выбора времени материала в угловой

#angular #timepicker

Вопрос:

Есть ли какой-либо способ отключить поле ввода candidosales/material-time-picker в приложении Angular. При вводе времени с клавиатуры все ломается.

Комментарии:

1. Когда вы говорите «Брелок», вы имеете в виду обычный или мобильный? И ломается все, что не вычисляет время ввода или показывает какую-то ошибку? Это демо-версия stackblitz на github: stackblitz.com/edit/material-time-picker и если я попытаюсь использовать клавиатуру для ввода времени, это не сработает так, как вы указали

2. Не мобильная клавиатура.

3. Пожалуйста, проверьте эту ссылку github.com/candidosales/material-time-picker/issues/1 это похожая проблема, с которой я сталкиваюсь.

4. Мой ответ ниже может вам помочь, вы пробовали?

5. На экране есть несколько индикаторов времени, а также он не работает на ngAfterViewInit()

Ответ №1:

Если вы хотите запретить ввод с клавиатуры, вам необходимо использовать onKeyDown атрибут поля ввода. Там вам просто нужно написать return false . Поэтому каждый раз, когда пользователь пытается что-то ввести, оно отменяется. Затем пользователь может выбрать дату только с помощью средства выбора даты материала. Ниже у меня есть пример для такого поля формы, как я их использую.

 <mat-form-field appearance="outline" color="primary">
  <mat-label>Date</mat-label>
  <input
    matInput
    [min]="minDate"
    [matDatepicker]="picker"
    autocomplete="off"
    onKeyDown="return false"
    placeholder="Date"
    formControlName="date"
  />
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
  <mat-error *ngIf="date.invalid"
    >Please select a date</mat-error
  >
</mat-form-field>

Ответ №2:

Я просмотрел документацию, и в настоящее время нет «способа» получить доступ к свойствам ввода, отключенным или готовым(наиболее подходящим) для вашего случая.

Но вы можете «взломать» с помощью чистого javascript. Возможно, есть и лучшие способы обойти это, но вы должны обратить внимание, если ваш выбор времени-единственный на странице, см. Ниже:

1 — ПЕРВЫЙ СЛУЧАЙ: Несколько индикаторов времени на экране: в вашем методе ngAfterViewInit () (заставьте его ждать загрузки html и элементов управления)

 /*This will take every timepicker inputs on page. They all share this #time_Control id
index init with 0, if the timepicker you want is the first. Adjust the index accordingly
*/

ngAfterViewInit(){
    const timepickers: any[] = document.querySelectorAll('#time_Control');
    const index = 0;
    const mytimepicker = timepickers[ index ];
    mytimepicker.disabled = true;
    //or, my personal recomendation => mytimepicker.readonly = true;
}

2 — СЕКУНДНЫЙ СЛУЧАЙ: Один таймер на экране:
в вашем методе ngAfterViewInit () (заставьте его ждать загрузки html и элементов управления)

 ngAfterViewInit(){
    const mytimepicker: any = document.querySelector('#time_Control');
    mytimepicker.readonly = true;
}
Метки: