Question

我使用Angular Material中的DatePicker，我想将输出格式更改为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

DatePicker用于日期对象。在调试控制台上打印时，您将始终以完整模式看到日期。如果希望组件以特定格式显示日期，则需要在模块上配置库。

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

有关更多信息，请访问official documentation。希望对您有所帮助。

Answer 2

您可以使用Moment.js将日期格式设置为“ YYYY / MM / DD”格式

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

使用时间可以帮助我们将日期更改为不同的格式

Answer 3

要仅格式化变量的输出，应使用pipes。

可以在docs上找到数据管道。

基本上，您必须在component.html上进行以下操作：

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

这将显示格式为datapicker.value的{{1}}。您还有很多其他选项可以根据管道设置输出格式，甚至创建自己的管道。

要格式化yyyy/mm/dd文件上的日期，您有几个选择。

使用Angular中的日期管道。
1. .ts
2. import { DatePipe } from '@angular/common';
使用dateformat（它改变了new DatePipe('en').transform(this.datepicker.value, 'yyyy/MM/dd');对象的原型，增加了一个Date方法）
使用date-fns
使用moment.js（过度杀伤力，对于如此小的用途来说非常沉重）

Answer 4

首先

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

然后

let val = this.dynamicForm.get('datePicker').value;
val = formatDate(val,'yyyy/MM/dd','en');
this.dynamicForm.controls['datePicker'].setValue(val);

Answer 5

angular material 2, change datepicker Date Format "MM/DD/YYYY" to "DD/MM/YYYY" strange behavior链接并尝试使用

或

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();
   }
  }
});

Angular Datepicker更改日期格式

5 个答案: