Apa z dalam tanggal javascript?

Tanggal JavaScript membingungkan. Selain itu, mereka mungkin menjadi hal yang paling tidak menarik untuk dipelajari dalam pemrograman JavaScript

Namun apa yang terjadi jika Anda membuat aplikasi Todo — Anda tahu, aplikasi web yang paling sering digunakan, dan Anda ingin menambahkan fungsi pengingat kalender?

Jika tanggal Anda tidak menangani zona waktu dengan benar dan Anda berakhir dengan kesalahan "off by 1", pengguna Anda yang melewatkan wawancara kerja akan marah dengan aplikasi Anda

Pengakuan saya tentang Tanggal JavaScript

Saya membutuhkan setidaknya 3 tahun pemrograman sebelum akhirnya duduk untuk memahami topik ini. Dan jika saya harus menebak, beberapa dari Anda yang membaca ini berada di tempat yang sama, jadi bersorak untuk itu. 🍻

Peringatan Spoiler

Tanggal JavaScript sebenarnya tidak sesulit itu. Saat Anda membaca postingan ini, Anda akan menyadari bahwa bagian tersulit dari tanggal JavaScript adalah konsep non-JavaScript seperti zona waktu dan standar pemformatan

Kebanyakan orang mencari tutorial tentang tanggal JavaScript ketika yang mereka butuhkan hanyalah ulasan tentang cara kerja waktu. (termasuk saya)

Sebelum saya mulai membaca… Bagaimana dengan MomentJS?

Sepertinya semua anak keren menggunakan MomentJS akhir-akhir ini (atau jika Anda lebih keren — Luxon)

Jangan khawatir, saya bukan ahli JavaScript di sini yang memberitahu Anda untuk selalu bekerja dengan Vanilla JS Date Objects — saya hanya ingin bekerja melalui konsep inti yang akan membuat hidup Anda dengan Moment/Luxon jauh lebih mudah

Akhirnya, mari kita mulai

Bayangkan ini - Anda telah membuat kode selama 8 jam, otak Anda sedikit lelah, dan Anda

1970-01-01T00:00:00Z

new Date('2020-09-30')

// Output: Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)

Masuk ke mode layar penuh Keluar dari mode layar penuh

Apaaa???

Tunggu saja, itu akan lebih membingungkan. Ini komputer lokal saya (komputer tempat saya berdiri sekarang di bagian Timur Amerika Serikat)

Dan inilah server web tempat saya menjalankan aplikasi pelatihan golf saya

Perhatikan sesuatu? . Dan selanjutnya, kedua komputer mengembalikan hasil yang sama untuk metode

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Entah saya menjadi gila, atau kami hanya mengetikkan hal yang persis sama di dua komputer yang berbeda dan mendapat jawaban yang sama sekali berbeda - belum lagi salah satu komputer membuat tanggal saya salah. Atau apakah itu…

Saya kira kita tidak perlu heran karena JavaScript adalah bahasa yang penuh dengan kejutan yang menyenangkan. Ngomong-ngomong, inilah waktunya untuk memecahkan misteri JavaScript lainnya

Ini terakhir kali Anda bingung dengan tanggal JavaScript

Jika kita akan mempelajari ini untuk selamanya, kita harus mulai dengan mempelajari tentang zona waktu komputer

Inilah zona waktu komputer lokal saya

Dan inilah zona waktu server saya

Seperti yang Anda lihat, zona waktu komputer lokal adalah EST/EDT, sedangkan zona waktu server adalah UTC. Ini, bersama dengan beberapa keanehan JavaScript, adalah alasan kami mendapatkan hasil yang tidak terduga di atas. Tapi itu tidak masuk akal sampai kita menjelajahi bagian dalam proses ini lebih jauh

Meskipun saya setuju bahwa JavaScript kadang-kadang bisa membingungkan, ketika sampai pada tanggal, *keseluruhan sistem membingungkan*— terutama ketika kita mulai berbicara tentang zona waktu. Tapi dengan sedikit pelajaran sejarah, saya pikir kita bisa membawa ini ke tempat yang bisa diatur

Apa itu UTC?

UTC adalah singkatan dari "Waktu Universal Terkoordinasi", dan sesuai namanya, ini adalah dasar bagaimana waktu disimpan. Yah… Agak

Sebelum kami memiliki catatan waktu di pergelangan tangan kami, di saku kami, di dinding kami, dan di pembuat kopi kami yang mahal, orang membutuhkan cara yang dapat diandalkan untuk menghitung waktu saat ini. Dan bagaimana mereka melakukannya?

PERINGATAN. Kita akan terganggu selama beberapa menit di sini, tetapi jika kita benar-benar ingin mengingat bagaimana tanggal JavaScript yang mengganggu ini bekerja, kita memerlukan beberapa konteks sejarah. Jika Anda tidak peduli untuk membaca pelajaran sejarah singkat saya, lanjutkan ke bagian selanjutnya dari posting ini

Bayangkan menempelkan tiang vertikal sempurna di tanah pada hari yang sangat cerah. Saat matahari terbit, kutub tersebut akan membentuk bayangan ke arah barat, dan sebaliknya, akan membentuk bayangan ke arah timur saat matahari terbenam. Jika Anda menghitung berapa lama bayangan itu bergerak dari satu titik ke titik lain, Anda dapat (agak) mencatat waktu

Tapi ada masalah… Jika saya meletakkan tiang vertikal di tanah tempat saya tinggal di U. S. , bayangan tidak akan dilemparkan ke arah yang sama pada saat yang sama ketika seseorang meletakkan tiang di tanah di suatu tempat di Irlandia

Untuk mengatasi ini, kita memerlukan titik referensi umum dan standar waktu. Pada titik tertentu, beberapa orang ilmiah berpikir bahwa menggunakan bujur 0° (alias "Prime Meridian", yang kebetulan adalah Greenwich UK) akan menjadi "titik referensi universal" yang baik untuk meletakkan "tiang di tanah" yang terkenal itu.

Tantangan berikutnya sebenarnya menghitung “waktu” berdasarkan “tiang di tanah” itu. Dulu dihitung menggunakan Greenwich Mean Time (Standar GMT — dimulai pada tahun 1847), tetapi kadang-kadang di awal tahun 1960-an, beberapa insinyur memutuskan bahwa kami memerlukan standar baru dengan perhitungan yang lebih konsisten daripada GMT.

Pada tahun 1970, standar UTC diselesaikan, tetapi pada tahun 1972, amandemen dibuat untuk menambahkan "detik kabisat" secara berkala untuk menjaga agar UTC sesuai dengan (yang sedikit tidak tepat karena ketidakteraturan rotasi bumi)

Hari ini, ada 3 perhitungan utama "waktu" (yang mulai semakin berkurang artinya bagi saya saat saya menulis ini)

1. Waktu Matahari Rata-Rata (UT1)

2. Waktu Koordinasi Universal (UTC)

3. Waktu Atom Internasional (TAI)

TAI adalah yang paling akurat dan dihitung dengan Jam Atom

UTC diturunkan dari TAI, tetapi ditambahkan detik kabisat demi tetap tersinkronisasi dengan UT1

Di JavaScript, Anda akan sering melihat GMT, tetapi itu hanya istilah lama yang tidak pernah hilang dan dapat dianggap setara dengan UTC

FAKTA MENYENANGKAN

Detik kabisat terakhir ditambahkan pada 30 Juni 2015, dan pada tahun 2023 di Konferensi Komunikasi Radio Dunia, akan ada diskusi tentang kemungkinan menghapus detik kabisat dari standar waktu UTC, yang belum diubah sejak 1972

Semuanya berputar di sekitar UTC

Sejak 1972, dunia telah beroperasi berdasarkan standar UTC ini, dan dianggap +/- 0 saat berbicara tentang zona waktu

Jika kita bergerak ke Barat dari zona waktu UTC, setiap zona waktu yang berurutan menjadi 1 jam lebih negatif, sedangkan sebaliknya berlaku saat bergerak ke Timur

Dan seperti yang mungkin sudah Anda duga, karena dunia berbentuk bola, bergerak ke Timur pada akhirnya membawa Anda ke zona waktu "Barat", jadi misalnya, zona waktu -10 setara dengan zona waktu +14

Zona waktu dapat ditentukan dengan dua cara (dan bagaimana dengan Daylight Savings Time?)

Kita dapat berbicara tentang zona waktu dengan dua cara

1. Sebagai referensi numerik ke "titik nol", yang merupakan zona waktu UTC

2. Sebagai nama yang umum dikenal, seperti "UTC", atau "EST"

Satu hal yang HARUS kita ingat adalah bahwa UTC tidak berubah. PERNAH

Saya tinggal di bagian timur AS. S. , jadi mulai 4 November 2019 → 7 Maret 2020, saya tinggal di zona waktu EST atau zona “Waktu Standar Timur (Amerika Utara)” dari daftar zona waktu resmi. Zona waktu EST juga dapat disebut sebagai "UTC-05" karena merupakan 5 jam *Barat dari *zona waktu UTC

Tapi apa yang terjadi pada 8 Maret 2020— hari pertama "Daylight Savings Time" di AS. S. ?

Jika UTC tidak pernah berubah, lalu bagaimana kita tahu itu adalah Daylight Savings Time?

Pada 8 Maret 2020 (hari pertama Daylight Savings Time di AS. S. ), zona waktu saya berubah dari EST → EDT, atau “Eastern Standard Time (North America)” → “Eastern Daylight Time (North America)”

EDT juga dapat disebut sebagai "UTC-04" karena kami telah "berkembang pesat" sebagai hasil dari waktu musim panas, dan sekarang, saya hanya tertinggal 4 jam dari UTC

Lihat cara kerjanya?? . Bagi kebanyakan orang, ini tidak masalah karena ketika saya mengatakan “Acara dimulai pukul 10 pagi. m. EST”, tidak ada yang akan menanyai saya apakah saya berbicara tentang EST atau EDT. Tidak ada yang peduli karena ponsel cerdas kami menangani konversi "di balik layar".

Tetapi sebagai pengembang JavaScript, kamilah yang menulis konversi tersebut, dan oleh karena itu, mungkin harus memahami hal ini

Tapi… Tanggal JavaScript saya mengatakan “GMT-0400”

Ingat — JavaScript itu aneh. Dan anehnya, masih menggunakan “GMT”, atau “Greenwich Mean Time” untuk mewakili, tapi tidak menghitung tanggalnya

Di otak Anda, saat Anda melihat "GMT", pikirkan saja "UTC"

Dan ketika Anda melihat "GMT-0400", ini sama dengan mengatakan "UTC-04", "EDT", atau "Waktu Musim Panas Timur (Amerika Utara)" seperti yang kami definisikan di bagian sebelumnya

JavaScript ditemukan pada tahun 90-an, jadi saya benar-benar tidak yakin mengapa mereka tidak menggunakan "UTC-0400" daripada "GMT-0400", tetapi itu adalah pertanyaan untuk lain hari

Tapi bagaimana dengan UNIX Epoch?

Jadi mari kita kembali ke komputer. Anda pasti pernah mendengar istilah, "Epoch UNIX", yang didefinisikan sebagai 1 Januari 1970

Ini dia dalam format ISO 8601 (lebih lanjut tentang ini nanti)

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

Sementara para insinyur "waktu" bekerja keras mendefinisikan standar UTC pada awal 1970-an, para insinyur komputer juga bekerja keras membuat komputer. Saat Anda membuat komputer, Anda harus memberinya titik referensi dan frekuensi "centang" agar dapat mengingat jam berapa sekarang. Dan titik referensi itu dipilih secara sewenang-wenang sebagai tengah malam, 1 Januari 1970

Beberapa sumber memperdebatkan alasan sebenarnya di balik tanggal ini, tetapi pada akhirnya tidak masalah. Ini hanyalah titik referensi. Jangan ragu untuk meninggalkan teori (atau cerita) Anda tentang ini di komentar - saya ingin membacanya

Jadi apa itu Tanggal JavaScript?

Tanggal JavaScript adalah jumlah milidetik yang telah berlalu sejak tengah malam pada tanggal 1 Januari 1970 (zona waktu UTC)

Hmm… Tanggal itu terdengar familiar…

Saat bekerja dengan tanggal JavaScript, Anda harus SELALU mengingat definisi ini. Ada banyak fungsi prototipe pada objek Tanggal seperti

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Masuk ke mode layar penuh Keluar dari mode layar penuh

Metode

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Dan jika Anda seperti saya, Anda mungkin bertanya-tanya tentang **. 032876712 **bagian. Ini melambangkan tahun kabisat. Sejak 1970, kami mengalami tahun kabisat di tahun-tahun berikutnya

1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020

Masuk ke mode layar penuh Keluar dari mode layar penuh

Karena kita menggunakan 1 Januari 2020, dan hari tambahan ditambahkan pada bulan Februari, kita perlu mengecualikan tahun kabisat 2020 dalam perhitungan, sehingga kita memiliki total 12 tahun kabisat sejak 1 Januari 1970. Dan jika kita mengubah tahun menjadi hari

Dan begitulah cara kami mendapatkan desimal tambahan itu 😆

Jadi jika kita ingin menghitung tanggal sebelum 1 Januari 1970, apakah itu mungkin?

Tentu saja. Nilainya hanya akan negatif

const d = new Date('1912-06-23');

console.log(d.valueOf()) // -1815350400000

Masuk ke mode layar penuh Keluar dari mode layar penuh

Kemungkinan Nilai Keluaran Objek Tanggal

Ketika kami mencetak

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

1. Nilai Primitif Objek Tanggal (angka)

2. ISO 8601 (tali)

3. Format Standar JavaScript (string)

Berikut adalah contoh masing-masing

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

Masuk ke mode layar penuh Keluar dari mode layar penuh

Nilai primitif dari Tanggal JavaScript sangat mudah. Seperti yang telah kita diskusikan, ini mewakili jumlah milidetik sejak tengah malam pada tanggal 1 Januari 1970 (zona waktu UTC), yang merupakan nilai angka

Format ISO 8601 sedikit lebih membingungkan, tetapi begitu Anda memecahkannya, tidak terlihat mengintimidasi. ISO 8601 sebenarnya tidak ada hubungannya dengan JavaScript — ini adalah standar global untuk waktu dan tanggal (lebih lanjut tentang ini di Lampiran jika Anda tertarik)

Kami akan berbicara lebih banyak tentang format ini nanti, tetapi untuk saat ini, ingatlah bahwa

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Z === “Zulu Time” (military) === UTC time (JavaScript)

Masuk ke mode layar penuh Keluar dari mode layar penuh

Setiap kali Anda menggunakan

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Last but not least — format tanggal standar JavaScript

Menurut pendapat saya, ini adalah hasil yang paling membingungkan dari semuanya. Nilai primitif mencetak jumlah milidetik sejak zaman, yang mudah dipahami. Nilai ISO 8601 mencetak nilai tanggal yang direpresentasikan dalam format standar yang tidak pernah berubah. Tapi format standar JavaScript?

Mari pecahkan misteri JavaScript ini untuk selamanya

A Tale of Two Computers (dan mengapa mereka tampaknya tidak setuju pada tanggal berapa sekarang. )

Di awal posting ini, sebelum kita mengetahui sesuatu tentang UTC, saya menunjukkan contoh bagaimana tanggal JavaScript dapat terlihat berbeda tergantung pada komputer yang Anda gunakan, dan zona waktu komputer tersebut.

Di bagian ini, kita akan menggunakan dua komputer dan satu tanggal (30 Sep 2020 — hari penulisan) untuk menunjukkan dengan tepat mengapa tanggal Anda "mati pada 1"

Berikut adalah dua komputer berbeda dengan zona waktu berbeda seperti yang ditunjukkan pada tangkapan layar di bawah ini. Perhatikan bagaimana zona waktu yang dicetak terlihat sedikit berbeda dari zona waktu yang kita bicarakan sebelumnya. Itu karena ada dua daftar zona waktu resmi - yang "biasa" dan yang "komputer". Di bagian pertama posting, kami menggunakan daftar "biasa", sedangkan di bawah, kami menggunakan daftar "komputer". Tidak ada perbedaan nyata, hanya semantik

Jadi ingatlah saat kita membahas contoh-contoh ini

Mari kita mulai dengan tanggal sederhana dan dapatkan nilai primitifnya

Sejauh ini bagus. Kami memberikan nilai

1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020

1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020

Sekarang, mari kita lihat apa yang terjadi jika kita mencetaknya sebagai waktu UTC

Masih terlihat bagus di sini. Seperti yang diharapkan, mereka menunjukkan nilai yang sama. Mari kita lihat ini sebagai string ISO, yang seharusnya sama dengan string UTC

Dan sekali lagi, kami mendapatkan nilai yang sama, seperti yang diharapkan. Tapi sekarang saatnya bersenang-senang

Dan inilah mengapa tanggal JavaScript membingungkan banyak orang (termasuk diri saya sebelumnya)

Mari kita pikirkan ini… Kita tahu hal-hal berikut

• Kami menggunakan nilai masukan

  1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020
  

  4

• Nilai primitif dari tanggal JavaScript adalah

  1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020
  

  3 milidetik sejak tengah malam, 1 Jan 1970 (waktu UTC)

• Jika kita mengonversi nilai primitif ke waktu UTC, ini mewakili tengah malam, 30 Sep 2020

Jadi yang dapat kita simpulkan di sini adalah bahwa beberapa metode tanggal JavaScript menampilkan nilai "benar" dari tanggal yang disimpan secara internal sementara metode lain menampilkan nilai "relatif" dari tanggal yang disimpan secara internal berdasarkan zona waktu komputer yang mencetak tanggal.

Ingat, komputer di sebelah kiri berada di zona waktu EDT, yaitu “UTC-04”

Jadi, jika nilai internal tanggal ini adalah

1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020

Oke, saya mengerti, tetapi mengapa JavaScript melakukannya dengan cara ini?

Jadi, inilah cara kerja tanggal JavaScript

1. Anda memasukkan nilai seperti

   1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020
   

   _4

2. JavaScript mengasumsikan bahwa nilai ini adalah waktu UTC

3. JavaScript menyimpannya sebagai waktu UTC

4. JavaScript mengeluarkannya dalam waktu lokal Anda saat menggunakan metode

   1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020
   

   8 atau saat Anda

   1970-01-01T00:00:00Z
   

   6 tanggal

Pertanyaan sebenarnya adalah… Jika JavaScript mengasumsikan bahwa Anda memasukkan nilai UTC, lalu mengapa JavaScript tidak menganggap Anda ingin nilai UTC dikeluarkan?

Nah, di mata JavaScript, saat Anda mengetik

1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020

Jadi mari kita bicara tentang bagaimana kita dapat menghindari masalah ini

Bagaimana memikirkan Tanggal JavaScript

Saat bekerja dengan tanggal JavaScript, kita perlu bertanya pada diri sendiri pertanyaan-pertanyaan berikut

1. Berapa nilai masukan saya, dan apakah saya menentukan zona waktu? . e.

   1972, 1976, 1980, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012, 2016, 2020
   

   _4 vs.

   const d = new Date('1912-06-23');
   
   console.log(d.valueOf()) // -1815350400000
   

   2)

2. Berapa nilai UTC dari tanggal saya?

3. Metode JavaScript apa yang saya gunakan untuk menampilkan tanggal, dan zona waktu apa yang akan menampilkan nilai saya?

Katakanlah Anda sedang membuat aplikasi yang memungkinkan pengguna Anda menentukan tanggal lahir mereka di profil pengguna mereka. Dan bayangkan ulang tahun pengguna kita pada tanggal 28 Juni 1971, dan mereka tinggal di Florida (zona waktu Timur)

Jadi, Anda membuat kode aplikasi dengan sangat cepat, dan menanyakan ulang tahunnya kepada pengguna

Pengguna telah memilih 28 Juni, tetapi aplikasi web Anda menampilkan 27 Juni saat dicetak sebagai string 😢

Ini kode untuk aplikasi web itu — mari kita lihat apakah Anda bisa menemukan kesalahannya

Mari kita lihat daftar periksa kami dari sebelumnya

1. Berapa nilai inputnya, dan apakah saya menentukan zona waktu? . Jadi secara teknis, kami menentukan zona waktu, tetapi ini adalah defaultnya — UTC

2. Berapa nilai UTC untuk tanggal ini?

3. Metode JavaScript apa yang saya gunakan untuk menampilkan tanggal? . Nilai input kami dicatat dalam UTC, tetapi karena kami menggunakan metode

   const myDate = new Date('2020-01-01');
   
   console.log(myDate.valueOf()) // 1577836800000
   

   2,

   const d = new Date('1912-06-23');
   
   console.log(d.valueOf()) // -1815350400000
   

   7, dan

   const d = new Date('1912-06-23');
   
   console.log(d.valueOf()) // -1815350400000
   

   8, ini akan mengubah tanggal mentah menjadi zona waktu lokal pengguna, yaitu Zona Waktu Standar Timur (Amerika Utara)

Jadi bagaimana kita memperbaikinya?

Ada dua metode

1. Termudah — Menampilkan tanggal dalam waktu UTC (konsisten dengan inputnya)

2. Lebih sulit — Menanyakan zona waktu kepada pengguna, dan menentukan zona waktu tersebut saat Anda menyimpan tanggal

Dengan metode pertama, yang perlu Anda lakukan hanyalah mengubahnya

const day = dateValue.getDate();
const month = dateValue.getMonth() + 1; // Return Value is 0 indexed
const year = dateValue.getFullYear();

Masuk ke mode layar penuh Keluar dari mode layar penuh

untuk ini

const day = dateValue.getUTCDate();
const month = dateValue.getUTCMonth() + 1; // Return Value is 0 indexed
const year = dateValue.getUTCFullYear();

Masuk ke mode layar penuh Keluar dari mode layar penuh

Dan setelah perubahan ini, voila. Berhasil

Metode kedua lebih rumit, tetapi masih bisa berfungsi. Katakanlah Anda meminta pengguna ini untuk memilih zona waktu mereka, dan mereka memilih zona waktu "EDT — Waktu Musim Panas Bagian Timur (Amerika Utara)"

Setelah Anda memiliki informasi ini, Anda dapat menggunakan kode JavaScript berikut (walaupun saya tidak merekomendasikannya)

Seperti yang Anda lihat, ini lebih banyak baris kode, dan sedikit berulang — jelas tidak disarankan

Banyak cara menggunakan tanggal JavaScript

Contoh di bagian sebelumnya menyoroti skenario "gotcha" tertentu, tetapi ada banyak cara lain untuk bekerja dengan tanggal JS

Misalnya, Anda dapat memasukkan apa saja ke dalam objek Date

// EXAMPLE #1
// Inputs as arguments
// Date(year, month, day, hour, minute, second, millisecond)
// Note: the month is 0-indexed (I have no clue why...)
new Date(2020, 11, 2, 7, 10);

// EXAMPLE #2
// Inputs as various strings
// This works with pretty much anything you can think of
new Date('Jan 20 2020');
new Date('January 20 2020');
new Date('Jan-20-2020');
new Date('Jan 20 2020 02:20:10')

// EXAMPLE #3
// Inputs as numbers (milliseconds)
new Date(102031203)

// EXAMPLE #4
// Inputs as ISO 8601 (we are about to talk about this)
new Date('2020-01-20T00:00Z')

// EXAMPLE #5
// Inputs with timezone specifications
new Date('Jan 20 2020 02:20:10 -10:00') // SPECIAL CASE
new Date('Jan 20 2020 02:20:10 -1000') // SPECIAL CASE
new Date('Jan 20 2020 02:20:10 (EDT)') // SPECIAL CASE

// EXAMPLE #6
// The current moment, specified in the user's local timezone
new Date(Date.now()) // SPECIAL CASE

Masuk ke mode layar penuh Keluar dari mode layar penuh

Ingat, selalu perhatikan nilai masukan Anda. Dalam contoh 1–4, kami menentukan tanggal ini dalam waktu UTC. Contoh 5 dan 6 adalah satu-satunya kasus di mana kami menentukan tanggal menurut zona waktu tertentu. Dalam contoh 5, kami melakukannya secara eksplisit. Pada contoh 6, metode statis

const d = new Date('1912-06-23');

console.log(d.valueOf()) // -1815350400000

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

Dengan kata lain, jika Anda merencanakan acara Livestream yang diadakan di California pada tanggal 10 Agustus 2020 (ingat, ini terjadi selama Waktu Musim Panas) pada pukul 8 malam, maka Anda perlu memasukkannya sebagai (di mana PDT adalah Waktu Musim Panas Pasifik)

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

dan tampilkan sebagai

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

Ini akan memastikan bahwa siapa pun yang membaca ini dari komputer pribadi mereka (di zona waktu yang berbeda) akan menampilkan waktu dan tanggal acara Livestream ini dalam waktu lokal mereka. Jangan ragu untuk mencobanya sendiri. Output dari

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

Pasti ada cara yang lebih mudah untuk melakukan ini (Moment JS dan Luxon JS)

Tidak, Anda tidak terjebak dengan objek Vanilla Date di JavaScript. Ada perpustakaan seperti Moment dan Luxon (Luxon adalah proyek terbaru dari pembuat Moment) yang memberi Anda metode cepat dan mudah untuk membuat dan memformat tanggal

Yang mengatakan, saya merekomendasikan membaca penuh dan menyeluruh dari posting ini setidaknya sekali atau dua kali sebelum menggunakan perpustakaan ini karena meskipun perpustakaan ini memiliki banyak metode pembantu untuk bekerja dengan tanggal JavaScript, mereka tidak mengubah bagaimana tanggal JavaScript bekerja secara internal, dan akan tetap

Inilah masalah yang sama dari yang sebelumnya didemonstrasikan dengan MomentJS. Dan ingatlah

Seperti yang Anda lihat, kami memiliki masalah yang sama di sini. Tapi… Momen sedikit lebih cerdas daripada Tanggal JavaScript. Jika Anda mengetikkan tanggal Anda langsung ke objek momen, itu berfungsi

Momen tidak hanya mencegah jebakan Tanggal yang umum (dalam banyak kasus), tetapi juga menyediakan metode mudah untuk memformat tanggal

Ini sama sekali bukan tutorial untuk menggunakan MomentJS atau Luxon — lihat dokumentasi mereka sendiri. Tujuan saya di sini adalah untuk menunjukkan bahwa meskipun perpustakaan ini menyediakan cara mudah untuk menangani tanggal JavaScript, mereka tidak mengubah cara JS Dates bekerja, dan Anda harus tetap bekerja untuk memahaminya

Lampiran. Primer pada ISO 8601 (opsional)

Ingat, 3 kemungkinan format keluaran untuk Tanggal JavaScript adalah

1. Nilai Primitif Objek Tanggal (angka)

2. ISO 8601 (tali)

3. Format Standar JavaScript (string)

Dalam apendiks ini, kita akan menyelami lebih dalam format standar ISO 8601

Sama seperti UTC bukan konsep khusus JavaScript, begitu pula ISO 8601

ISO 8601 adalah standar internasional, dan hadir dalam dua variasi utama

1. Dasar

2. Diperpanjang

JavaScript menggunakan variasi "Diperpanjang", yang berarti ada pembatas antara berbagai jenis nilai. Misalnya, mari kita lihat versi "Basic" dari tanggal dan waktu

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

Ini mewakili tengah malam, waktu UTC pada tanggal 30 September 2020 menggunakan format “Basic” dari standar ISO 8601. Tapi itu tidak terlalu mudah dibaca, dan JavaScript tidak menerimanya

Satu-satunya perbedaan antara variasi “Basic” dan “Extended” dari ISO 8601 adalah penggunaan pembatas. Ini adalah tanggal yang sama dalam format "Diperpanjang".

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

Dan dalam hal ini, JavaScript menerimanya sebagai valid. Hasilnya adalah 29 Sep karena browser saya mengonversi UTC (tengah malam, 30 Sep) menjadi EST (20:00, 29 Sep). Itu membuat konversi ini karena saya tinggal di zona waktu EST (dijelaskan di pos utama)

Inilah potongan-potongannya

Sebagian besar ini cukup jelas.

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Sekali lagi,

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

const myDate = new Date('2020-09-30');

// Primitive value (number)
myDate.valueOf() // 1601424000000

// ISO 8601 (string)
myDate.toISOString() // "2020-09-30T00:00:00.000Z"

// JavaScript Standard Format (string)
myDate.toString() // "Tue Sep 29 2020 20:00:00 GMT-0400 (Eastern Daylight Time)"

Z === “Zulu Time” (military) === UTC time (JavaScript)

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Hal terakhir yang perlu Anda ketahui tentang string ISO 8601 adalah bahwa string tersebut fleksibel. Anda dapat mengurangi kekhususan dengan mereka. Misalnya, semua string ISO berikut ini valid

1970-01-01T00:00:00Z

Masuk ke mode layar penuh Keluar dari mode layar penuh

Dan jika kita menghapus

const myDate = new Date('2020-01-01');

console.log(myDate.valueOf()) // 1577836800000

Apa arti Z dalam format tanggal?

Bagaimana cara menghapus z dari tanggal di JavaScript?

Apa yang Z wakili dalam zona waktu?

Apa Z dalam atribut nilai datetime?