สุดยอดคู่มือ JavaScript Date and Moment.js

ยินดีต้อนรับสู่คำแนะนำขั้นสูงสุดของเราเกี่ยวกับDateวัตถุJavaScript และ Moment.js บทช่วยสอนนี้จะสอนทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการทำงานกับวันที่และเวลาในโครงการของคุณ

วิธีการสร้างDateวัตถุ

รับวันที่และเวลาปัจจุบัน

const now = new Date(); // Mon Aug 10 2019 12:58:21 GMT-0400 (Eastern Daylight Time)

รับวันที่และเวลาพร้อมค่าแต่ละค่า

const specifiedDate = new Date(2019, 4, 29, 15, 0, 0, 0); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

ไวยากรณ์คือDate(year, month, day, hour, minute, second, millisecond).

โปรดทราบว่าเดือนต่างๆจะถูกจัดทำดัชนีเป็นศูนย์โดยเริ่มจากมกราคมที่ 0 และสิ้นสุดด้วยวันที่ 11 ธันวาคม

รับวันที่และเวลาจากการประทับเวลา

const unixEpoch = new Date(0);

ซึ่งแสดงถึงเวลาในวันพฤหัสบดีที่ 1 มกราคม 1970 (UTC) หรือเวลา Unix Epoch Unix Epoch มีความสำคัญเนื่องจากเป็นสิ่งที่ JavaScript, Python, PHP และภาษาและระบบอื่น ๆ ใช้ภายในเพื่อคำนวณเวลาปัจจุบัน

new Date(ms) ส่งคืนวันที่ของยุคบวกจำนวนมิลลิวินาทีที่คุณผ่านไปในหนึ่งวันมี 86,400,000 มิลลิวินาทีดังนั้น:

const dayAfterEpoch = new Date(86400000);

จะกลับมาในวันศุกร์ที่ 2 มกราคม 1970 (UTC)

รับวันที่และเวลาจากสตริง

const stringDate = new Date('May 29, 2019 15:00:00'); // Wed May 29 2019 15:00:00 GMT-0400 (Eastern Daylight Time)

การออกเดทด้วยวิธีนี้มีความยืดหยุ่นมาก ตัวอย่างทั้งหมดด้านล่างส่งคืนDateอ็อบเจ็กต์ที่ถูกต้อง:

new Date('2019-06') // June 1st, 2019 00:00:00 new Date('2019-06-16') // June 16th, 2019 new Date('2019') // January 1st, 2019 00:00:00 new Date('JUNE 16, 2019') new Date('6/23/2019')

คุณยังสามารถใช้Date.parse()วิธีส่งคืนจำนวนมิลลิวินาทีนับตั้งแต่ยุค (1 มกราคม 1970):

Date.parse('1970-01-02') // 86400000 Date.parse('6/16/2019') // 1560610800000

การตั้งค่าเขตเวลา

เมื่อส่งสตริงวันที่โดยไม่กำหนดเขตเวลา JavaScript จะถือว่าวันที่ / เวลาอยู่ใน UTC ก่อนที่จะแปลงเป็นเขตเวลาของเบราว์เซอร์ของคุณ:

const exactBirthdate = new Date('6/13/2018 06:27:00'); console.log(exactBirthdate) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

ซึ่งอาจทำให้เกิดข้อผิดพลาดเมื่อวันที่ส่งคืนปิดไปหลายชั่วโมง เพื่อหลีกเลี่ยงปัญหานี้ให้ส่งผ่านเขตเวลาพร้อมกับสตริง:

const exactBirthdate = new Date('6/13/2018 06:27:00 GMT-1000'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time) /* These formats also work: new Date('6/13/2018 06:27:00 GMT-10:00'); new Date('6/13/2018 06:27:00 -1000'); new Date('6/13/2018 06:27:00 -10:00'); */

นอกจากนี้คุณยังสามารถส่งรหัสเขตเวลาบางส่วน แต่ไม่ใช่ทั้งหมด:

const exactBirthdate = new Date('6/13/2018 06:27:00 PDT'); console.log(exactBirthdate) // Thu Jun 14 2018 01:27:00 GMT+0900 (Korean Standard Time)

Date วิธีการวัตถุ

บ่อยครั้งที่คุณไม่จำเป็นต้องใช้วันที่ทั้งหมด แต่เป็นเพียงบางส่วนเช่นวันสัปดาห์หรือเดือน โชคดีที่มีหลายวิธีในการทำเช่นนั้น:

const birthday = new Date('6/13/2018 06:27:39'); birthday.getMonth() // 5 (0 is January) birthday.getDate() // 13 birthday.getDay() // 3 (0 is Sunday) birthday.getFullYear() // 2018 birthday.getTime() // 1528838859000 (milliseconds since the Unix Epoch) birthday.getHours() // 6 birthday.getMinutes() // 27 birthday.getSeconds() // 39 birthday.getTimezoneOffset() // -540 (time zone offset in minutes based on your browser's location)

ทำให้การทำงานกับวันที่ง่ายขึ้นด้วย Moment.js

การกำหนดวันที่และเวลาให้ถูกต้องไม่ใช่เรื่องเล็ก ดูเหมือนว่าทุกประเทศจะมีวิธีการจัดรูปแบบวันที่ที่แตกต่างกันและการบัญชีสำหรับเขตเวลาที่แตกต่างกันและการประหยัดเวลาตามฤดูกาล / เวลาฤดูร้อนใช้เวลามาก นั่นคือสิ่งที่ Moment.js ส่อง - ทำให้การแยกวิเคราะห์การจัดรูปแบบและการแสดงวันที่เป็นเรื่องง่าย

ในการเริ่มใช้ Moment.js ให้ติดตั้งผ่านตัวจัดการแพ็คเกจเช่นnpmหรือเพิ่มลงในไซต์ของคุณผ่าน CDN ดูเอกสาร Moment.js สำหรับรายละเอียดเพิ่มเติม

รับวันที่และเวลาปัจจุบันด้วย Moment.js

const now = moment();

สิ่งนี้จะส่งคืนวัตถุพร้อมวันที่และเวลาตามตำแหน่งของเบราว์เซอร์ของคุณพร้อมกับข้อมูลสถานที่อื่น ๆ มันคล้ายกับพื้นเมืองของ new Date()JavaScript

รับวันที่และเวลาจากการประทับเวลาด้วย Moment.js

ในทำนองเดียวกันnew Date(ms)คุณสามารถส่งผ่านจำนวนมิลลิวินาทีตั้งแต่ยุคไปจนถึงmoment():

const dayAfterEpoch = moment(86400000);

หากคุณต้องการรับวันที่โดยใช้การประทับเวลา Unix เป็นวินาทีคุณสามารถใช้unix()วิธีการ:

const dayAfterEpoch = moment.unix(86400);

รับวันที่และเวลาจากสตริงด้วย Moment.js

การแยกวิเคราะห์วันที่จากสตริงด้วย Moment.js นั้นทำได้ง่ายและไลบรารียอมรับสตริงในรูปแบบเวลาวันที่ ISO 8601 หรือ RFC 2822 พร้อมกับสตริงที่DateวัตถุJavaScript ยอมรับ

แนะนำให้ใช้สตริง ISO 8601 เนื่องจากเป็นรูปแบบที่ได้รับการยอมรับอย่างกว้างขวาง นี่คือตัวอย่างบางส่วน:

moment('2019-04-21'); moment('2019-04-21T05:30'); moment('2019-04-21 05:30'); moment('20190421'); moment('20190421T0530');

การตั้งค่าเขตเวลาด้วย Moment.js

Up until now, we have been using Moment.js in local mode, meaning that any input is assumed to be a local date or time. This is similar to how the native JavaScript Date object works:

const exactBirthMoment = moment('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

However, to set a time zone, you must first get the Moment object in UTC mode:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 15:27:00 GMT+0900 (Korean Standard Time)

Then you can adjust for the difference in time zones with the utcOffset() method:

const exactBirthMoment = moment.utc('2018-06-13 06:27:00').utcOffset('+10:00'); console.log(exactBirthMoment) // Wed Jun 13 2018 06:27:00 GMT+0900 (Korean Standard Time)

You can also set the UTC offset as a number or a string:

moment.utc().utcOffset(10) // Number of hours offset moment.utc().utcOffset(600) // Number of minutes offset moment.utc().utcOffset('+10:00') // Number of hours offset as a string

To use named time zones (America/Los_Angeles) or time zone codes (PDT) with Moment objects, check out the Moment Timezone library.

Format the date and time with Moment.js

One of the major strengths that Moment.js has over native JavaScript Date objects is how easy it is to format the output date and time. Just chain the  format() method to a Moment date object and pass it a format string as a parameter:

moment().format('MM-DD-YY'); // "08-13-19" moment().format('MM-DD-YYYY'); // "08-13-2019" moment().format('MM/DD/YYYY'); // "08/13/2019" moment().format('MMM Do, YYYY') // "Aug 13th, 2019" moment().format('ddd MMMM Do, YYYY HH:mm:ss') // "Tues August 13th, 2019 19:29:20" moment().format('dddd, MMMM Do, YYYY -- hh:mm:ss A') // "Tuesday, August 13th, 2019 -- 07:31:02 PM"

Here's a table with some common formatting tokens:

InputOutputDescription
YYYY20194 digit year
YY192 digit year
MMMMAugustFull month name
MMMAugAbbreviated month name
MM082 digit month
M81 digit month
DDD225Day of the year
DD13Day of the month
Do13thDay of the month with ordinal
ddddWednesdayFull day name
dddWedAbbreviated day name
HH17Hours in 24 hour time
hh05Hours in 12 hour time
mm32Minutes
ss19Seconds
aam / pmAnte or post meridiem
AAM / PMCapitalized ante or post meridiem
ZZ+0900Timezone offset from UTC
X1410715640.579Unix timestamp in seconds
XX1410715640579Unix timestamp in milliseconds

See the Moment.js docs for more formatting tokens.

Working with JavaScript Date objects and Moment.js doesn't have to be time consuming. Now you should know more than enough to get started with both.