Угловой Datepicker изменить формат даты

Question

Я использую DatePicker из Angular Material, и я хотел бы изменить формат вывода на yyyy/mm/dd.

В настоящее время печатается дата в следующем формате: Wed Nov 14 2018 00:00:00 GMT+0100 (Central European Normal Time)

Как я могу это сделать?

datepicker = new FormControl('', [Validators.required]);


console.log(this.datepicker.value.toString());

Answer 1

угловой материал 2, изменить формат даты DatePicker Date «MM / DD / YYYY» на «DD / MM / YYYY» странное поведение ссылка и попробуйте это

или

angular.module('yourAppName')
  .directive('datepickerPopup', function (){
   return {
     restrict: 'EAC',
     require: 'ngModel',
     link: function(scope, element, attr, controller) {
    //remove the default formatter from the input directive to prevent conflict
   controller.$formatters.shift();
   }
  }
});

Answer 2

DatePicker работает с датой объекта. При печати на консоли отладки вы всегда будете видеть дату в полном режиме. Если вы хотите, чтобы ваш компонент отображал дату в определенном формате, вам необходимо настроить библиотеку в модуле.

@NgModule({
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
  ],
})
export class MyApp {}

Более подробная информация доступна в официальной документации . Надеюсь, это поможет.

Answer 3

Вы можете использовать Moment.js для форматирования даты в формате "ГГГГ / ММ / ДД"

moment(this.datepicker.value).format('YYYY/MM/DD')

использование момента поможет нам изменить дату в разные форматы

Answer 4

Чтобы отформатировать только вывод переменной, вы должны использовать pipe .

Канал данных можно найти в документах .

В основном, на вашем component.html вы должны сделать:

<p>The date is {{ datepicker.value | date:'yyyy/MM/dd' }}</p>

Это отобразит datapicker.value, отформатированный как yyyy/mm/dd. У вас есть много других опций для форматирования выходных данных на основе каналов и даже для создания собственных.

---

Чтобы отформатировать дату в файле .ts, у вас есть несколько вариантов.

1. Используйте Date Pipe от Angular.
   1. import { DatePipe } from '@angular/common';
   2. new DatePipe('en').transform(this.datepicker.value, 'yyyy/MM/dd');
2. Использовать dateformat (изменяет прототип объекта Date, добавляя метод format)
3. Использование date-fns
4. Использование moment.js (излишнее количество, сверхтяжелое для такого малого использования)