Как я могу изменить маску DatePicker в соответствии со значением, выбранным в коврик - PullRequest
Новая
       35

Как я могу изменить маску DatePicker в соответствии со значением, выбранным в коврик

1 голос
/ 18 марта 2019

Я начинаю с Angular, пытаюсь создать простое приложение, чтобы научиться работать с этим. То, что я пытаюсь сделать, это получить значение из mat-select и изменить маску моего mat-datepicker в соответствии с выбором.

Текущий в моем коде, он показывает данные, как я хочу, но мне нужно изменить это вручную в коде.

Пример: Пользователь выбирает дд ммм гггг, а средство выбора даты вместо отображения дд / мм / гггг показывает, что пользователь выбирает

Вопрос: Как я могу динамически изменить маску моего средства выбора даты в зависимости от опции, установленной на моем коврике?

мой HTML 

<h4>Please select a date format</h4>
<mat-form-field>
  <mat-select placeholder="Date Format" [(value)]="selected">
    <mat-option *ngFor="let dateformats of dateformatArray" [value]="dateformats.value">
      {{dateformats.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-card>
  <mat-card-title>Date Picker validator</mat-card-title>
    <mat-card-content>
      <mat-form-field>
        <input matInput placeholder="Valid Date" [min]="minDate" [matDatepicker]="dateValid" [formControl]="dateCtrl">
        <mat-datepicker-toggle matSuffix [for]="dateValid">
        </mat-datepicker-toggle>
        <mat-datepicker #dateValid></mat-datepicker>
        <mat-error align="end" *ngIf="dateCtrl.hasError('required')">
          A valid date format is required
        </mat-error>
      </mat-form-field>
    </mat-card-content>
</mat-card>

app.components.ts 

import { Component, OnInit, Input, Output, forwardRef, EventEmitter } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl, Validators } from '@angular/forms';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material';

export const MY_FORMATS = {
 parse: {
 dateInput: 'DD MMM YYYY',
},
display: {
  dateInput: 'DD MMM YYYY',
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
},
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS }
  ],
})

export class AppComponent {
  title = 'material-ng';
  selected = "string:DD_MMM_YYYY";

  myDate : Date = new Date();

  export interface dateformatlist {
    value: string;
    viewValue: string;
  }

  dateformatArray: dateformatlist[] = [
    {value: 'string:DD_MMM_YYYY', viewValue: 'dd MMM yyyy'},
    {value: 'string:DDMMMYY', viewValue: 'ddMMMyy'},
    {value: 'string:YYYY_MMM_DD', viewValue: 'yyyy MMM dd'},
    {value: 'string:MMM_DD_YYYY', viewValue: 'MMM dd yyyy'},
    {value: 'string:YYYY_MM_DD', viewValue: 'yyyy-MM-dd'},
    {value: 'string:DD_MM_YYYY', viewValue: 'dd.MM.yyyy'},
  ];

  minDate = new Date();
  dateCtrl:FormControl;

  constructor() {}

  ngOnInit(){
    this.dateCtrl = new FormControl('', [Validators.required])
  }
}

Спасибо!

...