angular4中日期格式的用法

在.ts文件中处理日期

日期的格式在不同的方法中会有不同的显示输出.

dateTime: Date;

this.dataTime = new Date(); //  获取当前日期
// 输出: Fri Dec 08 2017 00:33:01 GMT+0800 (中国标准时间)

有时我们会需要一些其他格式的string类型的输出.
可以看一下所有date中所有的tostring的方法.

        console.log("orderdate:", this.OrderDate);
        console.log("toISOString:", this.OrderDate.toISOString());
        console.log("toDateString:", this.OrderDate.toDateString());
        console.log("toUTCString:", this.OrderDate.toUTCString());
        console.log("toJSON:", this.OrderDate.toJSON());
        console.log("toLocaleDateString:", this.OrderDate.toLocaleDateString());
        console.log("toLocaleString:", this.OrderDate.toLocaleString());
        console.log("toLocaleTimeString:", this.OrderDate.toLocaleTimeString());
        console.log("toString:", this.OrderDate.toString());
        console.log("toTimeString:", this.OrderDate.toTimeString());

        //  输出结果:
        //  toISOString: 2017-12-07T16:33:01.843Z
        //  toDateString: Fri Dec 08 2017
        //  toUTCString: Thu, 07 Dec 2017 16:33:01 GMT
        //  toJSON: 2017-12-07T16:33:01.843Z
        //  toLocaleDateString: 2017/12/8
        //  toLocaleString: 2017/12/8 上午12:33:01
        //  toLocaleTimeString: 上午12:33:01
        //  toString: Fri Dec 08 2017 00:33:01 GMT+0800 (中国标准时间)
        //  toTimeString: 00:33:01 GMT+0800 (中国标准时间)

很多时候,数据库中希望存的样式是: ‘yyyy-MM-dd HH:mm:ss’, 但是上面的输出并没有.
注意: toISOString() 方法和 toJSON() 方法输出虽然样式相同, 但是时间时区不同

那么,前台中用来展示的date管道是不是可以 用呢?

  constructor(
    private datePipe: DatePipe,
  ) {}
    dateChange(){
        console.log("dateTime:",  this.datePipe.transform(this.dateTime, "yyyy-MM-dd HH:mm:ss"));
        }
// 输出:  2017-12-08 00:33:01

由测试可以发现, 使用datePipe中的transform方法可以实现想要的格式, 并且样式可以更多样化.

日期前台展现的用法:

前台html页面日期格式化： 

{{ dateTime | date:"yyyy-MM-dd HH:mm:ss"}}

{{ dateTime | date:"medium" }}

{{ dateTime | date:"short" }}

{{ dateTime | date:"fullDate" }}

{{ dateTime | date:"longDate" }}

{{ dateTime | date:"mediumDate" }}

{{ dateTime | date:"shortDate" }}

{{ dateTime | date:"mediumTime" }}

{{ dateTime | date:"shortTime" }}