Usage of date format in angular4

Keywords: Database

;

Processing date in.ts file

The format of the date will have different display outputs in different methods.

dateTime: Date;

this.dataTime = new Date(); //  Get the current date
// Output: Fri Dec 08 2017 00:33:01 GMT+0800 (China Standard Time)

Sometimes we need some string type output in other formats.
You can see all the tostring methods in all date s.

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

        //  Output results:
        //  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: 12:33:01 AM, 2017/12/8
        //  toLocaleTimeString:12:33:01 a.m.
        //  toString: Fri Dec 08 2017 00:33:01 GMT+0800 (China Standard Time)
        //  toTimeString: 00:33:01 GMT+0800 (China Standard Time)

Many times, the style you want to store in your database is:'yyyy-MM-dd HH:mm:ss', but the output above is not.
Note: The toISOString() method and toJSON() method outputs have the same style but different time zones

So, can the date pipe used in the foreground display be used?

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

Tests show that the transform method in datePipe can be used to achieve the desired format, and the styles can be more diverse.

Usage of Date Foreground Display:

Reception html Page date formatting: 

{{ 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' }}

Posted by Jr0x on Thu, 02 Jul 2020 08:53:46 -0700