Before the official introduction of Date, if you are interested in the magic Date of January 1, 1970, please read about it. Most kids know that the time stamp is from this date, but few kids know that history. Here’s a link to an interesting introduction, and check out apple’s “1970 Incident.”

Why did computers start on January 1, 1970? – Cloud + Community – Tencent Cloud (Tencent.com)

January 1, 1970

China is located in the east 8th Zone, so it will be eight hours ahead of standard time. The cause of the Apple 1970 incident is that IOS devices use UTC UTC time (GMT time) as the boundary of 0 on January 1, 1970, and the value is 0. When users change the time to 16:0 on December 31, 1969, the system will appear a negative time, which caused a bug, but it has been fixed 😄

1. Construction method

There are 4 methods, the following tests are innodeIn the environment, the time zone is not handled, the display is still Greenwich Mean time, running in the browser will automatically handle, the display isLocal timeBut it’s actually the same time.

1. Method 1👉 Structure without parameters

The obtained time is the current GreenwichMeanTime (GMT). If you want to obtain the current Chinese time, you need to add 8 hours

let now = new Date(a)console.log(now) 
/ / NodeJs T14:2021-11-26 and. 531 z
//Edge Browser Fri Nov 26 2021 22:34:31 GMT+0800
Copy the code

When executed in the browser, the local time is displayed, plus the 8-hour time difference. The following tests are performed in the Node environment, so you know what the meaning is.

2. Method 2👉Unix timestamp

Receives a timestamp parameter that is an integer value representing the number of milliseconds since epoch time

let epochTime = new Date(0) // Get the epoch time
console.log(epochTime) 
/ / NodeJs T00:1970-01-01 00:00. 000 z
//Edge browser Thu Jan 01 1970 08:00:00 GMT+0800
Copy the code

3. Method 3👉 Timestamp string

The argument is a string value representing a Date that can be converted to the number of milliseconds represented by the Date by the static method date.parse (). Ecma-262 has a specification for writing strings

Due to browser differences, creating date objects in this way is not strongly recommended. Just do a little digging and list a few specifications

  • “Month/day/year”, e.g. “10/24/2021”

  • “Month name, day, year”, as in “October 24, 2021”

  • Week Month name day Year hour: minute: second Time zone, for example, Sun October 24 2021 00:00:00 GMT+0800

  • ISO 8601 Extended format YYYY-MM-DDTHH: MM: Ss. sssZ, for example, 2021-10-24T00:00:00(applicable only

    Es5-compatible implementations)

🌰 for example

console.log(new Date('10/24/2021'))
console.log(new Date(Date.parse('October 24, 2021')))
console.log(new Date('Sun October 24 2021 00:00:00 GMT+0800'))
console.log(new Date('2021-10-24T00:00:00Z'))
//node
/** 2021-10-23T16:00:00.000Z 2021-10-23T16:00:00.000Z 2021-10-23T16:00:00.000Z 2021-10-24T00:00:00Copy the code

new DatePassing in the local time string gives you Greenwich time minus the time difference

4. Mode 4👉 provide date and time separately for each member

Date(year: number, month: number, date? : number, hours? : number, minutes? : number, seconds? : number, ms? : number)Copy the code

As you can see, date is mandatory and other parameters are optional

  • year

    Represents an integer value for the year. 0 to 99 is mapped to 1900 to 1999, with other values representing actual years

  • month

    Represents an integer value for the month, from 0 (January) to 11 (December). Note the corresponding month

  • date

    The default value is 1. The integer value indicates the day in a month

  • hours

    The default value is 0, an integer value representing the number of hours in a day (in 24 hours).

  • minutes

    Default is 0, integer value, represents the minute part of the integer value (0-59)

  • seconds

    Default is 0, integer value, represents the second partial integer value (0-59)

  • ms

    Default is 0, integer value, indicating the value of the millisecond part of the integer (0-999)

🌰 for example

let date1 = new Date(99.0)
let date2 = new Date(2021.11.24.20.0.0.999)
//node
console.log(date1) / / T16 1998-12-31:00:00. 000 z
console.log(date2) / / the T12:2021-12-24 00:00. 999 z
Copy the code

New Date(99, 0) was originally meant to represent 00:00.00 local time on January 1, 1999. Subtracting 8 time zones gives 16:00:00.000 GMT on December 31, 1998. The second example does the same analysis, but note that in the month representation, 0 represents January and 11 represents December.

What if the month is not 0-11, like if I do 12,13… So what happens? Let’s do a test. Okay

let date1 = new Date(99.11) / / 1999-12-1-00:00:00. 000
let date2 = new Date(99.12)
let date3 = new Date(99.13)
let date4 = new Date(99.14)
//node
console.log('date1: ', date1) / / date1: the 1999-11-30 T16:00:00. 000 z
console.log('date2: ', date2) / / date2: the 1999-12-31 T16:00:00. 000 z
console.log('date3: ', date3) / / date3: the 2000-01-31 T16:00:00. 000 z
console.log('date4: ', date4) / / date4: the 2000-02-29 T16:00:00. 000 z
Copy the code

As you can see, even if it’s used12The number of months above will not be incorrect, but continue to add months later

There is also a static counterpart, date.utc (), which returns the number of milliseconds corresponding to the Date. This method takes the same arguments as the fourth constructor, but it passes in UTC time and outputs its UTC equivalent

let date = new Date(Date.UTC(99.11))
console.log(date) 
/ / NodeJs T00:1999-12-01 00:00. 000 z
//Edge browser Wed Dec 01 1999 08:00:00 GMT+0800
Copy the code

5. Date.now()

Date.parse(), date.utc (), and date.now () are static methods used to retrieve the number of milliseconds that have passed since epoch time

console.log(Date.now())  / / 1637939378061
Copy the code

You can use this to do some time-consuming testing

/ / pseudo code
let start = Date.now()
// The code you want to test runs here at......
let end = Date.now()
// Time taken const timeCost = end-start
Copy the code

6. Date()andnew Date()

They are different. A constructor without new is not a constructor. The return value is a string

But they do. Look at the test below

let a = Date(a)let b = new Date(a)console.log(a) //Fri Nov 26 2021 23:15:23 GMT+0800 (China Standard Time)
console.log(b) / / the T15:2021-11-26 mingled. 526 z
console.log(b.toString()) //Fri Nov 26 2021 23:15:23 GMT+0800 (China Standard Time)
console.log(b.toLocaleString()) //Fri Nov 26 2021 23:15:23 GMT+0800 (China Standard Time)
Copy the code

Date() = new Date().tostring ()

** Looking back, what do I see? The browser console outputs the local time by calling the toString() method of the time object. ** then came to learn them…

Second, rewrite the method

1. toString()andtoLocaleString()

ToString () returns the date and time with time zone information, and time is also expressed in 24 hours (0 to 23)

ToLocaleString () returns the date and time consistent with the local environment in which the browser is running. This typically means that the format contains either AM(AM) or PM(PM) for time, but no time zone information (the exact format may vary by browser)

let b = new Date(a)console.log(b) //Fri Nov 26 2021 23:32:46 GMT+0800
console.log(b.toString()) //Fri Nov 26 2021 23:32:46 GMT+0800
console.log(b.toLocaleString())
// in Edge browser, 2021/11/26 11:32:46 PM
// in the Node environment is 11/26/2021, 11:32:46pm
Copy the code

You can see that using the above method returns the local time in both Node and Edge browser environments

2. valueOf()

The rewritten method returns a millisecond representation of the date as a positive integer, so the date object can be used for direct comparisons

let a = new Date(2021.11.20)
let b = new Date(2021.11.20.2)
console.log(a < b) //true
Copy the code

Three, date formatting

There are several specific methods for formatting dates, but the output of these methods varies from browser to browser and therefore cannot be used to display dates on the user interface, ToDateString ()\toTimeString()\toLocaleDateString()\toLocaleTimeString()toUTCString() \toLocaleTimeString() \toLocaleTimeString()toUTCString().

Other methods

Here is a table from the Little Red Book, just look it up when you use it, mainly to get and set up related operations

But!

We rarely use the native Date object, but use its wrapper library for Date and time manipulation. There are two mainstream libraries, one is Day.js, one is Moment. Js, the former super lightweight small 2KB, the latter is more heavy 200+, the former can be regarded as the essence of the latter reduced version of the bar, see like to eat! 🐒

Five, packaging libraryDay.js

The built-in Date object is still quite difficult to use, it can deal with some simple problems, the development of the general use of others encapsulated libraries to operate will be more convenient, so the above so many things have no use! ? Ha ha, the principle still should understand….

Official document: Day.js Chinese Website (Fenxianglu.cn)

Look at the home page of somebody else or compare pure and fresh bear to look, I when can have this level also whole one

Note that there are some separate considerations for working with Typescript. For details, see the Typescript website

Date and time can be said to be used in development is also very much of the data type, or need to master!

Creation is not easy, ask for attention or like 😄😄🤗