mat-datepicker с отфильтрованным вводом - PullRequest
Новая
       35

mat-datepicker с отфильтрованным вводом

0 голосов
/ 17 июня 2020

Я уже несколько дней борюсь с "простой" проблемой.

Требуется сделать простой выбор даты с возможностью фильтрации данных ручного ввода в формате дд / мм / гггг с автоматическим c добавление косых черт (/) между днем, месяцем и годом. Не могу поверить, что он еще не построен.

Я выбрал Material mat-datepicker, потому что ng-Material хорошо написан и в нем много полезных функций. Но обязательного фильтра клавиатуры найти не удалось.

Я нашел несколько дополнительных директив в качестве помощников для отфильтрованного ввода. Они работают до тех пор, пока на входе не останется никаких дополнительных элементов управления.

Ну вот застрял. Есть ли у кого-нибудь решение для отфильтрованного ввода для элемента управления вводом datepicker, которое работает под Angular 9 с IVY? Прямо как датапикер старого jQuery ...

1 Ответ

0 голосов
/ 25 июня 2020

Поскольку никто не мог помочь в решении этой проблемы, мне пришлось найти решение - оно простое и работает.

Я взял директиву textMask, как показано здесь: Как добавить маску на angular выбор даты материала К моему большому удивлению, он работал без ошибок.

И применен к коду как appMaskDate: 

    <mat-form-field>
        <input matInput [matDatepicker]="datepicker" [disabled]="is_disabled" 
               appMaskDate (dateInput)="addEvent('input', $event)" 
               (dateChange)="addEvent('change', $event)" [value]="select">
        <mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
        <mat-datepicker #datepicker color="primary"></mat-datepicker>
    </mat-form-field>

Моя ошибка и единственная причина путаницы заключалась в том, что есть 2 события запускаются из входной строки: (dateInput) и (dateChange), и они возвращают разные значения в свойстве _i момента.

  • просто для того, чтобы сэкономить время тому, кто должен будет применить ввод маска для выбора даты. И чтобы не было смущения при исследовании странного мира Angular Material и Angular CDK;)
...