Формат значения выбора даты углового материала

#angular #input #angular-material

#angular #ввод #угловой-материал

Вопрос:

У меня есть ввод выбора даты, подобный этому:

 <mat-form-field class="example-full-width">
    <input #startDate matInput [matDatepicker]="picker" (dateInput)="first($event.value)" placeholder="Enter date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

При изменении входных данных первая функция получает $event.value дату в этом формате:

Вт, 09 апреля 2019, 00:00:00 GMT 0200

И мне нужен этот (AAAA-MM-DD):

2019-04-09

Есть ли какой-либо способ изменить выходное значение выбора даты, не разбирая его вручную? Спасибо.

Ответ №1:

С материалом DatePicker вы можете выбрать MatNativeDateModule или MatMomentDateModule как реализацию даты. В вашем случае я предлагаю вам взять MatMomentDateModule , в то время $event.value это будет объект Moment, который можно легко преобразовать в строку.

Вот мое решение

app.module.ts

 @NgModule({
  imports: [
    ...,
    MatDatepickerModule,
    MatMomentDateModule
  ]

your.component.ts

 <input #startDate matInput [matDatepicker]="picker" (dateInput)="first($event.value.format('YYYY-MM-D'))" placeholder="Enter date">

Вот рабочий стекблитц.

Ответ №2:

Вы могли бы использовать DatePipe.

В вашем компоненте:

 import { DatePipe } from '@angular/common';

constructor(private datePipe : DatePipe)
{

}
this.datePipe.transform(your_date, 'MM-dd-yyyy');

Вы должны добавить также в app.module.

Я надеюсь, что это поможет вам!

1. 1. У Angular уже есть канал даты 2. Даже если ваше решение соответствует тому, что он ищет, и оно работает, вы не показали ему, как использовать канал. 3. Каналы не работают со значениями, передаваемыми из шаблона в компонент через выражение функции в angular

Ответ №3:

Создайте шаблон пользовательского формата, например

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

Это будет ваш формат, и вам нужно будет импортировать его в своих поставщиках компонентов

 import { MAT_DATE_FORMATS } from '@angular/material';

  //...

providers: [
   {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
 ],

Я надеюсь, что это вам поможет.