Блог

Мне нужно изменить формат даты, находясь onkeyup в angular 11.

Я использовал matdatepicker , когда я ввожу 10121997 в поле ввода, оно должно измениться на 10/12/1997.

В моем html-файле,

 <mat-form-field>
        <mat-label [translate]="'COMMON.DATE_OF_BIRTH'"></mat-label>
        <input matInput [matDatepicker]="dob" [required]="true" formControlName="dob" (keyup)="dateofBirth(form.value)">
        <mat-hint align="start" [translate]="'SIXTH_ITERATION.MUST_BE_18_NOT_SHARED_PUBLICLY'"></mat-hint>
        
        <mat-error *ngIf="dateOfBirth.errors?.required amp;amp; !dateOfBirth.errors?.matDatepickerParse" [translate]="'VALIDATORS.FIELD_REQUIRED'"></mat-error>
        <mat-error *ngIf="dateOfBirth.errors?.matDatepickerParse" [translate]="'EIGHT_ITERATION.VALIDATORS.INVALID_FORMAT'">
        </mat-error>
        <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
        <mat-datepicker #dob></mat-datepicker>
        <mat-error *ngIf="dateOfBirth.hasError('underEighteen')" [translate]="'VALIDATORS.DOB'">
        </mat-error>
      </mat-form-field>
 

в моем файле ts

 dateofBirth(data){
  
    var date = this.datePipe.transform(this.form.get('dob')?.errors?.matDatepickerParse?.text, 'yyyy-MM-dd');
    console.log(date);
  }
 

Я не мог изменить формат в dateofbirth функции. В консоли он возвращает null или invalid даты. Предложите лучшее решение для этого.

Здесь могут быть две проблемы. Проверьте следующие действия.

1. Проверьте, передаете ли вы действительный объект даты обработчику события keyUp.
2. Возможно, вам придется использовать keyDown вместо этого событие, так как возможно, что вы не получаете значения, выбранные из средства выбора даты. Как правило, keyUp событие вызывается, когда вы просто нажимаете на него, поэтому, когда вызывается обработчик событий, он не получает данные, поэтому вы получаете null или undefined .
3. Лучший способ не позволять пользователю вводить дату(вам может потребоваться проверка, которая является просто накладными расходами), и позволить им выбрать ее через datepicker. Применитесь readonly к полю ввода. Я также добавил это в ответе.

Я бы рекомендовал вам следовать 3 этому совету в качестве предложения.

 <mat-form-field>
        <mat-label [translate]="'COMMON.DATE_OF_BIRTH'"></mat-label>
        <input matInput [matDatepicker]="dob" [required]="true" formControlName="dob" (keydown)="dateofBirth(form.value)" readonly >
        <mat-hint align="start" [translate]="'SIXTH_ITERATION.MUST_BE_18_NOT_SHARED_PUBLICLY'"></mat-hint>
        
        <mat-error *ngIf="dateOfBirth.errors?.required amp;amp; !dateOfBirth.errors?.matDatepickerParse" [translate]="'VALIDATORS.FIELD_REQUIRED'"></mat-error>
        <mat-error *ngIf="dateOfBirth.errors?.matDatepickerParse" [translate]="'EIGHT_ITERATION.VALIDATORS.INVALID_FORMAT'">
        </mat-error>
        <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
        <mat-datepicker #dob></mat-datepicker>
        <mat-error *ngIf="dateOfBirth.hasError('underEighteen')" [translate]="'VALIDATORS.DOB'">
        </mat-error>
      </mat-form-field>
 

 dateofBirth(data){
    console.log(data) // check the values here
    const date = this.datePipe.transform('pass the date', 'yyyy-MM-dd');
    console.log(date);
  }