Два сборщика даты на угловом материале с различным форматом даты - PullRequest
Новая
       0

Два сборщика даты на угловом материале с различным форматом даты

0 голосов
/ 31 мая 2018

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

Есть идеи?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Я знаю, что он довольно старый, и, начиная с Angular 6+, вы больше не можете смешивать ngModel и реактивные формы.Вот немного workaroud с небольшой настройкой CSS, так что всплывающее окно DatePicker по-прежнему отображается в нужном месте.

datepicker.component.html 

<input #dateInput class="hidden-date-input" [matDatepicker]="datepicker" formControlName="myDatePicker" readonly>
<input placeholder="Choose a date" class="form-control" (click)="datepicker.open()" [readonly]="true" [value]="fullDate">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker #datepicker disabled="false" (closed)="dateInput.blur()"></mat-datepicker>

datepicker.component.ts 

...
export class DatepickerComponent {
get fullDate() {
    const dateValue = this.form.controls['myDatePicker'].value;
    if (!dateValue) { return ''; }
    return moment(dateValue).format('MM/DD/YYYY');
  }

css 

.hidden-date-input {
  width: 0;
  border: none;
  padding: 0;
}

Спасибо PraSame за идею.

0 голосов
/ 31 мая 2018

Вы можете добавить дополнительное поле ввода для отображения выбора даты.И установка исходного указателя даты как скрытого.

Это позволит вам установить одностороннюю привязку для ограниченного свойства и позволит применить конвейер типа «дата».В этой трубе вы можете иметь любой формат на ваш выбор. 

<mat-form-field>
    <input matInput [matDatepicker]="picker" [(ngModel)]="myDate" placeholder="Date" hidden=true [readonly]="true">
    <input matInput [ngModel]="myDate | date : 'dd/MM/y'" [ngModelOptions]="{standalone: true}" placeholder="Date" (click)="picker.open()" [readonly]="true">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker name="myDate" ngDefaultControl></mat-datepicker>
</mat-form-field>
...