Original: https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/
Author: Zell Liew

Very strange date in JavaScript. When we need to deal with the date and time, and it makes us very nervous, so we need the help date -fnsand Momentsuch a library
, but we do not always need to use the library. If you know which areas need attention, the date the object is actually very simple. In this article, I will take you to know about Dateall content objects.
First, let's discuss the next time zone

Time zone

Local time and Coordinated Universal Time (UTC): There are hundreds of time zones, in JavaScript, we only care about two time zones world

Local time refers to the time zone of your computer is located.
UTC is actually Greenwich Mean Time (GMT).

By default, almost every date JavaScript method (in addition to a) show date / time to the local time. Only when the specified UTC will get UTC. In this context, we will discuss creating a date object

Create a date object

You can use new dateto create a date. There are four ways to use new Date():

The date format string
Date type parameter
Timestamp
Empty parameters

Date string

In the construction process, by passing the date format string to new datecreate a date.

new Date('1988-03-21')

We prefer this way, which is closer to our usual way of writing life
if written 21-03-1988, we can deduce the correct date March 21, 1988, but in js inside, 21-03-1988is invalid date, you will getInvalid Date

`new Date('21-03-1988')` returns Invalid Date.

In different parts of the world, to explain the string of dates are different. For example, 11-06-2019is not 2019年6月11日that 2019年11月6日. But you're not sure which one I mean, unless you know which date system I use.

In JavaScript, if you want to use the date string, required the use of a format accepted by the whole world. One format is ISO 8601 Extended format

// ISO 8601 Extended format
`YYYY-MM-DDTHH:mm:ss:sssZ`

These values represent:

YYYY: Four-digit year
MM: Two-digit month (January is 01, Dec. 12)
DD: Two-digit date (0-31)
-: Date separator
T: Specify the start time
HH: 24-hour time representation (0-23)
mm: Minutes (0 to 59)
ss: Seconds (0 to 59)
sss: Ms (0 to 999)
:: Time separator
Z: If established Z, the date will be indicated as UTCif. ZNot specified, for the local time (only been applied to the case of providing time).

If you want to create a date, hours, minutes, seconds and milliseconds are optional. So, if you want to set a date for the June 11, 2019, you can write:

new Date('2019-06-11')

Of special note here. Creation date using the date strings have a big problem. If console.logthis date, you will find the problem.

If you live in the area after the Greenwich mean time, you will get a date is June 10.

`new Date('2019-06-11')` produces 10th June if you're in a place behind GMT.

If you live in Greenwich before time, you will get a date6月11

`new Date('2019-06-11')`produces 11th June if you're in a place after GMT.

This is because the date string in this way has a special behavior: If you create a date (no time specified), you will get a set date in UTC.

In the above scenario, when new Date('2019-06-11')the time is actually the date of creation is 2019年6月11日，UTC时间上午12点. This is why, after living in the area of Greenwich standard time people get is 6月10日instead 6月11日.

If you want to create a date in local time, use the form date string, you need to include the time. When you include the time, you need at least HHand mm(or Google Chrome return an invalid date).

new Date('2019-06-11T00:00')

Date created in Local Time vsl. Date created in UTC.

Both types of local time and UTC date string may cause an error, and difficult to detect. So, I suggest that you do not create a date date string. (By the way, MDN also warned not to use the date string method, because the browser may parse the date string in different ways)

MDN recommends against creating date with date strings.

If you want to create a date, use the parameter or timestamp.

Creation date parameters

You can pass new Date()seven types of parameters to create a date / time

Year: Four-digit years.
Month: Month (0-11) month starting from 0 if omitted, the default is 0.
Day: Days (1-31) If omitted, the default is one.
Hour: Hour (0-23) If omitted, the default is 0.
Minutes: Min (0-59) If omitted, the default is 0.
Seconds: Sec (0-59) If omitted, the default is 0.
Milliseconds: Ms (0-999) If omitted, the default is 0.

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

Many developers (including myself) have avoided using argumentsthe method, because it looks very complicated. it's actually really easy.

Try to read the numbers from left to right, in descending order: year, month, day, hour, minute, seconds and milliseconds.

new Date(2017, 3, 22, 5, 23, 50)

// This date can be easily read if you follow the left-right formula.
// Year: 2017,
// Month: April (because month is zero-indexed)
// Date: 22
// Hours: 05
// Minutes: 23
// Seconds: 50

Date of the most puzzling place is the value of the month is zero-based, such as, January === 0, February === 1, March === 2and so on.

我们不知道为什么会这样，但确实javascript就是这么设计的。所以与其争论不如接受。一旦你接受了这个事实，日期变得非常容易使用。

这里还有一些例子可以让你熟悉下：

// 21st March 1988, 12am, Local Time.
new Date(1988, 2, 21)

// 25th December 2019, 8am, Local Time.
new Date(2019, 11, 25, 8)

// 6th November 2023, 2:20am, Local Time
new Date(2023, 10, 6, 2, 20)

// 11th June 2019, 5:23:59am, Local Time
new Date(2019, 5, 11, 5, 23, 59)

注意，使用参数创建的日期都是本地时间？

这就是是使用参数的一个好处 - 你不会在本地时间和UTC之间混淆。如果您需要UTC，请以这种方式创建UTC日期：

// 11th June 2019, 12am, UTC.
new Date(Date.UTC(2019, 5, 11))

用时间戳创建日期

在JavaScript中，时间戳是自1970年1月1日以来经过的毫秒数（1970年1月1日也称为Unix纪元时间）。 根据我的经验，您很少使用时间戳来创建日期。您只能使用时间戳来比较不同的日期（稍后会详细介绍）。

// 11th June 2019, 8am (in my Local Time, Singapore)
new Date(1560211200000)

空参数创建日期

如果您创建一个没有任何参数的日期，您将得到一个设置为当前时间的日期(在本地时间中)。

你可以从图像中看出，当我写这篇文章时，它是5月25日上午11点10分在新加坡。

创建日期方式总结

你可以使用 new Date()创建日期.
有四种可行的语法:
1. 日期字符串
2. 参数形式
3. 时间戳
4. 空参数
不要使用日期字符串形式.
最好使用参数形式.
谨记月份是从0开始索引的.

接下来，让我们讨论将日期转换为可读字符串。

格式化日期

大多数编程语言都提供了格式化工具来创建所需的任何日期格式。例如，在PHP中，可以使用date(“d M Y”)将日期格式化为2019年1月23日。

但在javascript中没有这种简便的方式

原生Date对象提供了7种格式化方法。这七个方法中的每一个都为您提供了一个特定的值(它们非常无用)。

const date = new Date(2019, 0, 23, 17, 23, 42)

toString --> Wed Jan 23 2019 17:23:42 GMT+0800 (Singapore Standard Time)
toDateString --> Wed Jan 23 2019
toLocaleString --> 23/01/2019, 17:23:42
toLocaleDateString --> 23/01/2019
toGMTString --> Wed, 23 Jan 2019 09:23:42 GMT
toUTCString --> Wed, 23 Jan 2019 09:23:42 GMT
toISOString --> 2019-01-23T09:23:42.079Z

如果您需要自定义格式，则需要自己创建。

自定义日期格式

假设你想要的是Thu, 23 January 2019 这种格式，你需要使用Date对象提供的方法。
要获取日期，可以使用以下四种方法：

getFullYear: 根据当地时间获取四位数表示的年
getMonth: 根据当地时间获月 (0-11).
getDate: 根据当地时间获取日期，一个月中的第多少天 (1-31).
getDay: 根据当地时间获取一周中的第多少天 (0-6)，一周是指 Sunday (0) 到 Saturday (6).

所以，为了创建Thu, 23 January 2019这种格式，我们可以这样来做：

const d = new Date(2019, 0, 23)
const year = d.getFullYear() // 2019
const date = d.getDate() // 23

但是，Thu,January 就有点难度了
要获得January，您需要创建一个对象，将所有十二个月的值映射到它们各自的名称。

const months = {
  0: 'January',
  1: 'February',
  2: 'March',
  3: 'April',
  4: 'May',
  5: 'June',
  6: 'July',
  7: 'August',
  8: 'September',
  9: 'October',
  10: 'November',
  11: 'December'
}

由于Month是零索引的，所以我们可以使用数组而不是对象。它会产生相同的结果。

const months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

现在你可以这么做：

使用 getMonth 得到月份对应的索引.
根据索引从 months 获取对应的月份

const monthIndex = d.getMonth()
const monthName = months[monthIndex]
console.log(monthName) // January

相同方法可以获取到Thu，创建一个包含一周七天的数组。

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

然后：

使用 getDay 得到 dayIndex
根据 dayIndex 得到 dayName

const dayIndex = d.getDay()
const dayName = days[dayIndex] // Thu

然后，将创建的所有变量组合起来以获得格式化的字符串。

const formatted = `${dayName}, ${date} ${monthName} ${year}`
console.log(formatted) // Thu, 23 January 2019

的确，这样做很麻烦，但是一旦你掌握了，就简单了

如果需要创建自定义格式的时间，可以使用以下方法（全部是根据当地时间）：

getHours: 小时 (0-23).
getMinutes: 分钟 (0-59).
getSeconds: 秒 (0-59).
getMilliseconds: 毫秒 (0-999).

接下来我们来讨论日期之间的比较

比较日期

如果您想知道一个日期是在另一个日期之前还是之后，您可以直接将它们与>、<、>=和<=进行比较。

const earlier = new Date(2019, 0, 26)
const later = new Date(2019, 0, 27)

console.log(earlier < later) // true

如果你想确认两个日期是否恰好在同一时间，那就比较麻烦。你不能用==或===比较它们。

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)

console.log(a == b) // false
console.log(a === b) // false

要检查两个日期是否完全相同，你可以使用getTime获得其时间戳，再比较。

const isSameTime = (a, b) => {
  return a.getTime() === b.getTime()
}

const a = new Date(2019, 0, 26)
const b = new Date(2019, 0, 26)
console.log(isSameTime(a, b)) // true

如果想检查两个日期是否在同一天，可以比较它们的getFullYear、getMonth和getDate值。

const isSameDay = (a, b) => {
  return a.getFullYear() === b.getFullYear() &&
    a.getMonth() === b.getMonth() &&
    a.getDate()=== b.getDate()
}

const a = new Date(2019, 0, 26, 10) // 26 Jan 2019, 10am
const b = new Date(2019, 0, 26, 12) // 26 Jan 2019, 12pm
console.log(isSameDay(a, b)) // true

还有最后一个问题，我们需要讨论

根据一个日期获得另一个日期

有两种可能的情况，您希望从一个日期获取另一个日期。

相对于另一个日期开始，设置某个时间/日期值.
相对于另一个日期开始，增加或者减少某个值.

设置某个时间/日期值

你可以使用下列方法，为某个日期设置时间/日期值,方法都是比较语义化的：

setFullYear: Set 4-digit year in Local Time.
setMonth: Set month of the year in Local Time.
setDate: Set day of the month in Local Time.
setHours: Set hours in Local Time.
setMinutes: Set minutes in Local Time.
setSeconds: Set seconds in Local Time.
setMilliseconds: Set milliseconds in Local Time.

例如，如果想将日期设置为一个月中的15号，可以使用setDate(15)。

const d = new Date(2019, 0, 10)
d.setDate(15)

console.log(d) // 15 January 2019

月份也是一样，记住，月份是从0开始的

const d = new Date(2019, 0, 10)
d.setMonth(5)

console.log(d) // 10 June 2019

注意：上面的setter方法会改变原始日期对象。在实际中，我们不应该改变原对象（了解更多）我们应该在新的日期对象上执行这些操作。

const d = new Date(2019, 0, 10)
const newDate = new Date(d)
newDate.setMonth(5)

console.log(d) // 10 January 2019
console.log(newDate) // 10 June 2019

从某个日期的基础上增加或者减少值

通过在另一个日期添加/减去delta，我的意思是：您希望从另一个日期获得X的日期。它可以是X年，X月，X天等。

要获得delta，您需要知道当前日期的值。您可以使用以下方法获取它：

getFullYear: Gets 4-digit year according to local time
getMonth: Gets month of the year (0-11) according to local time.
getDate: Gets day of the month (1-31) according to local time.
getHours: Gets hours (0-23) according to local time.
getMinutes: Gets minutes (0-59) according to local time.
getSeconds: Gets seconds (0-59) according to local time.
getMilliseconds: Gets milliseconds (0-999) according to local time.

添加/减去delta有两种通用方法。第一种方法在Stack Overflow上更受欢迎。它简洁，但更难掌握。第二种方法更冗长，但更容易理解。

我们假设今天是2019年3月28日，你想要一个三天以后的日期

第一种方式

// Assumes today is 28 March 2019
const today = new Date(2019, 2, 28)

首先，我们创建一个新的Date对象(这样我们就不会更改原始日期)

const finalDate = new Date(today)

接下来，我们需要知道我们想要改变的值。由于我们想改变的天数，所以我们可以通过getDate获得天。

const currentDate = today.getDate()

想获得三天以后的日期，我们将使用将delta(3)添加到当前日期

finalDate.setDate(currentDate + 3)

完整代码：

const today = new Date(2019, 2, 28)
const finalDate = new Date(today)
finalDate.setDate(today.getDate() + 3)

console.log(finalDate) // 31 March 2019

第一种方式

我们使用getFullYear、getMonth、getDate和其他getter方法，直到得到我们想要更改的类型。然后，使用 new Date 来创建日期。

const today = new Date(2019, 2, 28)

// Getting required values
const year = today.getFullYear()
const month = today.getMonh()
const day = today.getDate()

// Creating a new Date (with the delta)
const finalDate = new Date(year, month, day + 3)

console.log(finalDate) // 31 March 2019

日期自动纠错

如果为Date提供一个超出其可接受范围的值，JavaScript将自动重新计算日期。

假如我们将日期设置为33rd March 2019，这是个无效的日期，JavaScript 会自动将 33rd March 调整到 2nd April.

// 33rd March => 2nd April
new Date(2019, 2, 33)

33rd March gets converted to 2nd April automatically.

这意味着在创建一个增量时，您不需要担心计算分钟、小时、天、月等。JavaScript自动为您处理它。

// 33rd March => 2nd April
new Date(2019, 2, 30 + 3)

30 + 3 = 33. 33rd March gets converted to 2nd April automatically.

以上就是你需要了解的关于JavaScript的原生日期对象的知识

[Translation] Date object in JavaScript