Panduan Terbaik untuk Tarikh dan Momen JavaScript.js

Selamat datang ke panduan utama kami mengenai Dateobjek JavaScript dan Moment.js. Tutorial ini akan mengajar anda semua yang perlu anda ketahui mengenai bekerja dengan tarikh dan masa dalam projek anda.

Cara Membuat DateObjek

Dapatkan tarikh dan masa semasa

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

Dapatkan tarikh dan masa dengan nilai individu

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

Sintaksnya ialah Date(year, month, day, hour, minute, second, millisecond).

Perhatikan bahawa bulan diindeks sifar, bermula dengan Januari pada 0 dan berakhir dengan Disember pada 11.

Dapatkan tarikh dan masa dari cap waktu

const unixEpoch = new Date(0);

Ini mewakili waktu pada hari Khamis, 1 Januari 1970 (UTC), atau waktu Unix Epoch. Unix Epoch penting kerana itulah yang digunakan oleh JavaScript, Python, PHP, dan bahasa dan sistem lain secara dalaman untuk mengira waktu semasa.

new Date(ms) mengembalikan tarikh zaman ditambah bilangan milisaat yang anda lalui. Dalam sehari terdapat 86,400,000 milisaat sehingga:

const dayAfterEpoch = new Date(86400000);

akan kembali pada hari Jumaat, 2 Januari 1970 (UTC).

Dapatkan tarikh dan masa dari rentetan

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

Mendapatkan tarikh dengan cara ini sangat fleksibel. Semua contoh di bawah mengembalikan Dateobjek yang sah :

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')

Anda juga boleh menggunakan Date.parse()kaedah untuk mengembalikan bilangan milisaat sejak zaman itu (1 Januari 1970):

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

Menetapkan zon waktu

Semasa melewati rentetan tarikh tanpa menetapkan zon waktu, JavaScript menganggap tarikh / waktu berada di UTC sebelum menukarnya ke zon waktu penyemak imbas anda:

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)

Ini boleh menyebabkan kesilapan apabila tarikh yang dikembalikan dimatikan berjam-jam. Untuk mengelakkan ini, lalui zon waktu bersama dengan rentetan:

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'); */

Anda juga boleh memasukkan beberapa kod zon waktu, tetapi tidak semua,

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 Kaedah Objek

Selalunya anda tidak memerlukan keseluruhan tarikh, tetapi sebahagiannya seperti hari, minggu atau bulan. Nasib baik ada beberapa kaedah untuk melakukannya:

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)

Jadikan Bekerja dengan Tarikh Lebih Mudah dengan Moment.js

Memperoleh tarikh dan masa dengan tepat bukanlah tugas kecil. Setiap negara nampaknya mempunyai cara yang berbeza untuk memformat tarikh, dan memperhitungkan zon waktu yang berbeza dan penjimatan siang / waktu musim panas memerlukan banyak waktu. Di situlah Moment.js bersinar - menjadikan penguraian, pemformatan, dan paparan tarikh menjadi mudah.

Untuk mula menggunakan Moment.js, pasangkannya melalui pengurus pakej seperti npm, atau tambahkan ke laman web anda melalui CDN. Lihat dokumentasi Moment.js untuk maklumat lebih lanjut.

Dapatkan tarikh dan masa terkini dengan Moment.js

const now = moment();

Ini mengembalikan objek dengan tarikh dan waktu berdasarkan lokasi penyemak imbas anda, bersama dengan maklumat tempat lain. Ia serupa dengan JavaScript asli new Date().

Dapatkan tarikh dan masa dari cap waktu dengan Moment.js

Sama seperti new Date(ms), anda boleh meneruskan bilangan milisaat sejak zaman ini ke moment():

const dayAfterEpoch = moment(86400000);

Sekiranya anda ingin mendapatkan tarikh menggunakan cap waktu Unix dalam beberapa saat, anda boleh menggunakan unix()kaedah:

const dayAfterEpoch = moment.unix(86400);

Dapatkan tarikh dan masa dari rentetan dengan Moment.js

Menghuraikan tarikh dari rentetan dengan Moment.js adalah mudah, dan perpustakaan menerima rentetan dalam format Tarikh Waktu ISO 8601 atau RFC 2822, bersama dengan rentetan yang diterima oleh Dateobjek JavaScript .

Rentetan ISO 8601 disyorkan kerana formatnya diterima secara meluas. Berikut adalah beberapa contoh:

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

Menetapkan zon waktu dengan 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.