日期格式更改Angular 2

6

我需要更改我的日期格式,但无法使用moment.js,我只需要将日期从yyyy-mm-dd转换为dd-mm-yyyy。 我使用的是Angular v2.4.0。

3个回答

32

使用DatePipe管道

date_expression | date[:format]

就您的情况而言

{{ date_expression | date:'dd-MM-yy' }}

如何在组件中使用管道:

NgModule({
  ....
  providers: [DatePipe]
})
或者
@Component({
   ....
  providers: [DatePipe]
})

在您的组件中将其设置为日期变量

constructor(private datePipe: DatePipe) {
}

ngOnInit() {
    this.date = this.datePipe.transform(new Date(), 'dd-MM-yy');
}

是的,看起来很简单,但是能否将这个{{ date_expression | date:'dd-MM-yy' }}放入变量中(我需要稍后将其放在类上)我的意思是variable= {{ date_expression | date:'dd-MM-yy' }}。 - Jędrek Markowski

5
你可以创建自定义管道来实现这一点。请参考以下代码。更多信息请参阅DatePipe文档
import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'customDateFormat',
})
export class customDateFormatPipe implements PipeTransform {
    transform(value: string) {
       var datePipe = new DatePipe("en-US");
        value = datePipe.transform(value, 'dd-mm-yyyy');
        return value;
    }
}

在HTML中添加自定义管道,如下所示:
{{currentDate | customDateFormat }}

2
是的,看起来很简单,但是能否将这个{{ date_expression | date:'dd-MM-yy' }}放入变量中(我需要稍后将其放在类上)我的意思是variable= {{ date_expression | date:'dd-MM-yy' }}。 - Jędrek Markowski
@JędrekMarkowski: 但是如果以后想要使用momentJS或其他库,您必须在一个地方进行修改,以便在所有页面上产生效果。无论如何,您已经得到了解决方案。 :-) - Nilesh Khisadiya
它抛出了错误,找不到customDateFormat。 - Sudarshan Kalebere

1
你可以创建一个像这样的函数:
function formatDate() {
    let addZeroToLoneFigure = (n) => n.toString().length === 1 ? '0' + n : n.toString();
    let format = 'DD-MM-YYYY';
    let d= new Date();
    format.replace('DD', addZeroToLoneFigure(d.getDate()));
    format.replace('MM', addZeroToLoneFigure(d.getMonth() + 1));
    format.replace('YYYY', addZeroToLoneFigure(d.getFullYear()));
    return format;
}

是的,看起来很简单,但是能否将这个{{ date_expression | date:'dd-MM-yy' }}放入变量中(我需要稍后将其放在类上)我的意思是变量= {{ date_expression | date:'dd-MM-yy' }}。 - Jędrek Markowski
我不明白你想要什么,但是我的函数会返回一些东西,所以只需执行 let myVar = this.formatDate(); - user4676340

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接