Автоматическое заполнение sla sh в текстовом поле matdatepicker при запуске

Question

В настоящее время мы используем angular 8, angular материал, .netcore2.2

Когда пользователь начинает вводить дату в текстовом поле (в моем случае это поле matdatepicker), он должен автоматически заполнить sla sh т.е., например, если пользователь вводит дату в любом формате, например, ddmmyy или mmddyy, тогда sla sh должен быть заполнен сразу после ввода пользователем dd / или mm / (другими словами, sla sh должен заполняться после dd или mm который выглядит как (дд / или мм /) (дд / мм / или мм / дд /)) и это должно происходить со всеми полями matdatepickers в моем приложении . Пожалуйста, предложите мне лучший способ реализовать вышеуказанное требование . Ниже приведен пример кода для одного из полей выбора даты.

<mat-form-field class="mat-input-field">
            <input matInput [matDatepicker]="AssessmentDate" placeholder="Assessment Begin Date*"
                   formControlName="aO_ASSESS_BEGIN_DATE" aria-label="Date" ng-keyup="">
            <mat-datepicker-toggle matSuffix [for]="AssessmentDate"></mat-datepicker-toggle>
            <mat-datepicker #AssessmentDate></mat-datepicker>
            <mat-hint align="start"><strong>Format mm/dd/yyyy</strong> </mat-hint>
            <mat-error *ngIf="sectionAForm.get('aO_ASSESS_BEGIN_DATE').errors?.required || sectionAForm.get('aO_ASSESS_BEGIN_DATE').errors?.matDatepickerParse">Assessment Date Required (mm/dd/yyyy)</mat-error>
            <mat-error *ngIf="sectionAForm.get('aO_ASSESS_BEGIN_DATE').errors?.futureDate">Assessment Date cannot be future.</mat-error>
          </mat-form-field>

Answer 1

Этого можно добиться с помощью angular2-text-mask

Посещений: https://stackblitz.com/edit/angular2-text-mask?file=src%2Fapp%2Fapp.component.ts

После успешной установки и импорта этого пакета выполните следующие шаги

Шаг: 1 в файле component.ts добавить эту строку:

public datemask = [ /[1-9]/, /\d/,'/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];

Шаг: 2 В файле component.html добавить следующие строки:

<mat-form-field class="input">
    <input matInput [textMask]="{mask: datemask }" [matDatepicker]="picker" #input>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>