Hampir semua jenis aplikasi yang ditulis dalam JavaScript bekerja dengan waktu atau tanggal dalam kapasitas tertentu. Pada awalnya, ini terbatas pada API Tanggal bawaan. API ini mencakup fungsionalitas dasar, tetapi fungsinya sangat terbatas. Pustaka pihak ketiga seperti Moment.js, dan API bawaan yang lebih baru seperti API Intl dan API Temporal baru, menambah fleksibilitas yang jauh lebih besar dalam bekerja dengan waktu dan tanggal. Kebangkitan Dan Kejatuhan Moment.js Moment.js adalah perpustakaan JavaScript dengan utilitas canggih untuk bekerja dengan waktu dan tanggal. Ini mencakup fitur yang hilang dari API Tanggal dasar, seperti manipulasi zona waktu, dan membuat banyak operasi umum menjadi lebih sederhana. Momen juga mencakup fungsi untuk memformat tanggal dan waktu. Ini menjadi perpustakaan yang banyak digunakan di banyak aplikasi berbeda. Namun, Moment juga memiliki masalah yang sama. Ini adalah perpustakaan yang besar, dan dapat menambah ukuran bundel aplikasi secara signifikan. Karena perpustakaan tidak mendukung pengocokan pohon (fitur bundler modern yang dapat menghapus bagian perpustakaan yang tidak digunakan), seluruh perpustakaan Momen disertakan meskipun Anda hanya menggunakan satu atau dua fungsinya. Masalah lain dengan Moment adalah kenyataan bahwa objek yang dibuatnya bisa berubah. Memanggil fungsi tertentu pada objek Momen memiliki efek samping dan mengubah nilai objek tersebut. Hal ini dapat menyebabkan perilaku atau bug yang tidak terduga. Pada tahun 2020, pengelola Moment memutuskan untuk mengalihkan perpustakaan ke mode pemeliharaan. Tidak ada pengembangan fitur baru yang dilakukan, dan pengelola menyarankan agar tidak menggunakannya untuk proyek baru. Ada perpustakaan tanggal JavaScript lainnya, seperti date-fns, tetapi ada pemain baru di kota ini, sebuah API yang dibangun langsung ke dalam JavaScript: Temporal. Ini adalah standar baru yang mengisi lubang pada Date API asli serta memecahkan beberapa keterbatasan yang ditemukan di Moment dan perpustakaan lainnya. Apa itu Sementara? Temporal adalah API waktu dan tanggal baru yang ditambahkan ke standar ECMAScript, yang mendefinisikan JavaScript modern. Pada Maret 20266, ini telah mencapai Tahap 4 dari proses TC39 (komite yang mengawasi proposal dan penambahan bahasa JavaScript), dan akan disertakan dalam spesifikasi ECMAScript versi berikutnya. Ini telah diterapkan di beberapa browser: Chrome 144+ dan Firefox 139+, dan Safari diperkirakan akan segera menyusul. Polyfill juga tersedia untuk browser yang tidak didukung dan Node.js. API Temporal membuat objek yang, secara umum, mewakili momen dalam waktu. Ini dapat berupa stempel waktu penuh dan tanggal dalam zona waktu tertentu, atau dapat berupa contoh umum waktu "jam dinding" tanpa informasi zona waktu atau tanggal apa pun. Beberapa fitur utama Temporal meliputi:
Waktu dengan atau tanpa tanggal. Objek Temporal dapat mewakili waktu tertentu pada tanggal tertentu, atau waktu tanpa informasi tanggal apa pun. Tanggal tertentu, tanpa waktu, juga dapat direpresentasikan. Dukungan zona waktu. Objek temporal sepenuhnya sadar zona waktu dan dapat dikonversi di zona waktu yang berbeda. Momen juga mendukung zona waktu, tetapi memerlukan pustaka zona waktu-momen tambahan. Kekekalan. Setelah objek Temporal dibuat, objek tersebut tidak dapat diubah. Konversi aritmatika waktu atau zona waktu tidak mengubah objek yang mendasarinya. Sebaliknya, mereka menghasilkan objek Temporal baru. Pengindeksan berbasis 1. Sumber bug yang umum pada API Tanggal (dan juga Momen) adalah bahwa bulan tidak diindeks. Artinya Januari adalah bulan 0, bukan bulan 1 seperti yang kita pahami di kehidupan nyata. Temporal memperbaikinya dengan menggunakan pengindeksan berbasis 1 — Januari adalah bulan 1. Itu ada di dalam browser. Karena Temporal adalah API di browser itu sendiri, Temporal tidak menambahkan apa pun ke ukuran bundel aplikasi Anda.
Penting juga untuk dicatat bahwa Date API tidak akan hilang. Meskipun Temporal menggantikan API ini, API ini tidak dihapus atau tidak digunakan lagi. Banyak aplikasi akan rusak jika browser tiba-tiba menghapus Date API. Namun, perlu diingat juga bahwa Momen kini dianggap sebagai proyek lama dalam mode pemeliharaan. Di sisa artikel, kita akan melihat beberapa “resep” untuk memigrasikan kode berbasis Momen ke API Temporal baru. Mari kita mulai melakukan refaktorisasi! Membuat Objek Tanggal Dan Waktu Sebelum kita dapat memanipulasi tanggal dan waktu, kita harus membuat objek yang mewakilinya. Untuk membuat objek Momen yang mewakili tanggal dan waktu saat ini, gunakan fungsi momen. const sekarang = momen(); console.log(sekarang); // Momen<2026-02-18T21:26:29-05:00>
Objek ini sekarang dapat diformat atau dimanipulasi sesuai kebutuhan.
// ubah ke UTC //peringatan: Ini mengubah objek Momen dan menempatkannya dalam mode UTC! console.log(sekarang.utc()); // Momen<2026-02-19T02:26:29Z>
// mencetak string yang diformat - perhatikan bahwa sekarang menggunakan waktu UTC console.log(now.format('MM/DD/YYYY hh:mm:ss a')); // 19/02/2026 02:27:07
Hal utama yang perlu diingat tentang Momen adalah objek Momen selalu menyertakan informasi tentang waktu dan tanggal. Jika Anda hanya perlu bekerja dengan informasi waktu, hal ini biasanya baik-baik saja, namun hal ini dapat menyebabkan perilaku yang tidak terduga dalam situasi seperti Waktu Musim Panas atau tahun kabisat, yang mana tanggal dapat berdampak pada penghitungan waktu. Temporal lebih fleksibel. Anda dapat membuat objek yang mewakili tanggal dan waktu saat ini dengan membuat objek Temporal.Instant. Ini mewakili titik waktu yang ditentukan oleh waktu sejak “zaman” (tengah malam UTC pada tanggal 1 Januari 1970). Temporal dapat mereferensikan momen ini dengan presisi tingkat nanodetik. const sekarang = Temporal.Sekarang.instant();
// lihat nanodetik mentah sejak zaman tersebut console.log(sekarang.epochNanodetik); // 1771466342612000000n
// format untuk UTC console.log(sekarang.toString()); // 19-02-2026T01:55:27.844Z
// format untuk zona waktu tertentu console.log(now.toString({ timeZone: 'Amerika/New_York' })); // 18-02-2026T20:56:57.905-05:00
Temporal.Objek instan juga dapat dibuat untuk waktu dan tanggal tertentu dengan menggunakan metode statis.
const myInstant = Temporal.Instant.from('2026-02-18T21:10:00-05:00');
// Format instan dalam zona waktu lokal. Perhatikan bahwa ini hanya mengontrol // pemformatan - tidak mengubah objek seperti yang dilakukan moment.utc. console.log(myInstant.toString({ timeZone: 'America/New_York' })); // 18-02-2026T21:10:00-05:00
Anda juga dapat membuat tipe objek Temporal lainnya, termasuk:
Temporal.PlainDate: Tanggal tanpa informasi waktu. Temporal.PlainTime: Waktu tanpa informasi tanggal. Temporal.ZonedDateTime: Tanggal dan waktu dalam zona waktu tertentu.
Masing-masing memiliki metode from yang dapat dipanggil dengan objek yang menentukan tanggal dan/atau waktu, atau string tanggal untuk diurai. // Hanya kencan const hari ini = Temporal.PlainDate.from({ tahun: 2026, bulan: 2, // perhatikan kami menggunakan 2 untuk bulan Februari hari: 18 }); console.log(hari ini.toString()); // 18-02-2026
// Hanya sebentar const waktu makan siang = Temporal.PlainTime.from({ jam: 12 }); console.log(waktu makan siang.toString()); // 12:00:00
// Tanggal dan waktu dalam zona waktu AS Bagian Timur const dueAt = Temporal.ZonedDateTime.from({ Zona waktu: 'Amerika/New_York', tahun: 2026, bulan: 3, hari: 1, jam: 12, menit: 0, kedua: 0 }); console.log(dueAt.toString()); // 01-03-2026T12:00:00-05:00[Amerika/New_York]
Penguraian Kami telah membahas pembuatan informasi tanggal dan waktu secara terprogram. Sekarang mari kita lihat penguraian. Parsing adalah salah satu area di mana Momen lebih fleksibel dibandingkan API Temporal bawaan. Anda dapat mengurai string tanggal dengan meneruskannya ke fungsi momen. Dengan satu argumen, Momen mengharapkan string tanggal ISO, namun Anda dapat menggunakan format alternatif jika Anda memberikan argumen kedua yang menentukan format tanggal yang digunakan.
const isoDate = momen('21-02-2026T09:00:00'); const formattedDate = momen('21/2/26 9:00:00', 'M/D/YY h:mm:ss');
konsol.log(isoDate); // Momen<21-02-2026T09:00:00-05:00>
console.log(tanggal diformat); // Momen<21-02-2026T09:00:00-05:00>
Di versi yang lebih lama, Moment akan membuat tebakan terbaik untuk mengurai string tanggal yang diformat secara sewenang-wenang. Hal ini dapat menimbulkan hasil yang tidak terduga. Misalnya, apakah 03-02-2026 tanggal 2 Februari atau 3 Maret? Karena alasan ini, versi Momen yang lebih baru menampilkan peringatan penghentian yang jelas jika dipanggil tanpa string tanggal berformat ISO (kecuali argumen kedua dengan format yang diinginkan juga diberikan). Temporal hanya akan mengurai string tanggal yang diformat khusus. String harus sesuai dengan format ISO 8601 atau ekstensinya, RFC 9557. Jika string tanggal yang tidak sesuai diteruskan ke metode from, Temporal akan menampilkan RangeError.
// Menggunakan string tanggal RFC 9557 const myDate = Temporal.Instant.from('21-02-2026T09:00:00-05:00[Amerika/New_York]'); console.log(myDate.toString({ timeZone: 'America/New_York' })); // 21-02-2026T09:00:00-05:00
// Menggunakan string tanggal yang tidak diketahui const otherDate = Temporal.Instant.from('21/2/26 9:00:00'); // RangeError: Kesalahan sementara: Karakter tidak valid saat mengurai nilai tahun.
Persyaratan pasti dari string tanggal bergantung pada jenis objek Temporal yang Anda buat. Dalam contoh di atas, Temporal.Instan memerlukan ISO penuhString tanggal 8601 atau RFC 9557 yang menentukan tanggal dan waktu dengan offset zona waktu, namun Anda juga dapat membuat objek PlainDate atau PlainTime hanya menggunakan subset format tanggal. const myDate = Temporal.PlainDate.from('21-02-2026'); console.log(tanggalsaya.toString()); // 21-02-2026
const myTime = Temporal.PlainTime.from('09:00:00'); console.log(waktuku.toString()); // 09:00:00
Perhatikan bahwa string ini harus tetap sesuai dengan format yang diharapkan, atau kesalahan akan terjadi.
// Menggunakan string waktu yang tidak sesuai. Ini semua akan memunculkan RangeError. Temporal.PlainTime.from('9:00'); Temporal.PlainTime.from('09:00:00');
Kiat pro: Menangani string non-ISOKarena Temporal mengutamakan keandalan, Temporal tidak akan mencoba menebak format string seperti 01-02-2026. Jika sumber data Anda menggunakan string seperti itu, Anda perlu melakukan beberapa manipulasi string untuk mengatur ulang nilai menjadi string ISO seperti 01-02-2026 sebelum mencoba menggunakannya dengan Temporal.
Pemformatan Setelah Anda memiliki objek Momen atau Temporal, Anda mungkin ingin mengonversinya menjadi string yang diformat suatu saat nanti. Ini adalah contoh di mana Momen sedikit lebih singkat. Anda memanggil metode format objek dengan serangkaian token yang menjelaskan format tanggal yang diinginkan. tanggal const = momen();
console.log(tanggal.format('MM/DD/YYYY')); // 22/02/2026
console.log(date.format('MMMM Lakukan YYYY, h:mm:ss a')); // 22 Februari 2026, 20:18:30
Di sisi lain, Temporal mengharuskan Anda untuk lebih bertele-tele. Objek temporal, seperti Instan, memiliki metode toLocaleString yang menerima berbagai opsi pemformatan yang ditentukan sebagai properti objek.
const date = Temporal.Sekarang.instant();
// tanpa argumen, kita akan mendapatkan format default untuk lokal saat ini console.log(tanggal.toLocaleString()); // 22/2/2026, 20:23:36 (dengan asumsi lokal en-US)
// meneruskan opsi pemformatan untuk menghasilkan string format khusus console.log(date.toLocaleString('en-US', { bulan: 'panjang', hari: 'numerik', tahun: 'numerik', jam: '2 digit', menit: '2 digit' })); // 22 Februari 2026 pukul 20.23
// hanya meneruskan kolom yang Anda inginkan dalam format string console.log(date.toLocaleString('en-US', { bulan: 'pendek', hari: 'numerik' })); // 22 Februari
Pemformatan tanggal sementara sebenarnya menggunakan API Intl.DateTimeFormat (yang sudah tersedia di browser modern) di bawah tenda. Itu berarti Anda bisa membuat objek DateTimeFormat yang dapat digunakan kembali dengan opsi pemformatan khusus Anda, lalu meneruskan objek Temporal ke metode formatnya. Oleh karena itu, ini tidak mendukung format tanggal khusus seperti yang dilakukan Moment. Jika Anda memerlukan sesuatu seperti 'Q1 2026' atau pemformatan khusus lainnya, Anda mungkin memerlukan beberapa kode pemformatan tanggal khusus atau menghubungi perpustakaan pihak ketiga. const formatter = new Intl.DateTimeFormat('en-US', { bulan: '2 digit', hari: '2 digit', tahun: 'numerik' });
const date = Temporal.Sekarang.instant(); console.log(formatter.format(tanggal)); // 22/02/2026
Token pemformatan Momen lebih mudah untuk ditulis, namun tidak ramah lokal. Formatnya merangkai "kode keras" seperti urutan bulan/hari. Keuntungan menggunakan objek konfigurasi, seperti yang dilakukan Temporal, adalah objek tersebut secara otomatis beradaptasi dengan lokasi tertentu dan menggunakan format yang benar. const date = Temporal.Sekarang.instant();
const formatOpsi = { bulan: 'numerik', hari: 'numerik', tahun: 'numerik' };
console.log(date.toLocaleString('en-US', formatOptions)); // 22/2/2026
console.log(date.toLocaleString('en-GB', formatOptions)); // 22/02/2026
Perhitungan tanggal Dalam banyak aplikasi, Anda harus melakukan beberapa penghitungan pada suatu tanggal. Anda mungkin ingin menambah atau mengurangi satuan waktu (hari, jam, detik, dll.). Misalnya, jika Anda memiliki tanggal saat ini, Anda mungkin ingin menunjukkan tanggal 1 minggu dari sekarang kepada pengguna. Objek momen memiliki metode seperti penjumlahan dan pengurangan yang melakukan operasi ini. Fungsi-fungsi ini mengambil nilai dan satuan, misalnya: add(7, 'days'). Namun, satu perbedaan yang sangat penting antara Momen dan Temporal adalah ketika melakukan perhitungan tanggal ini, objek yang mendasarinya diubah dan nilai aslinya hilang. const sekarang = momen();
console.log(sekarang); // Momen<24-02-2026T20:08:36-05:00>
const minggu berikutnya = sekarang.tambahkan(7, 'hari'); console.log(Minggu depan); // Momen<2026-03-03T20:08:36-05:00>
// Gotcha - objek aslinya telah bermutasi console.log(sekarang); // Momen<2026-03-03T20:08:36-05:00>
Untuk menghindari kehilangan tanggal aslinya, Anda dapat memanggil clone pada objek Moment untuk membuat salinan. konstan sekarang= momen(); const minggu berikutnya = sekarang.clone().add(7, 'hari');
console.log(sekarang); // Momen<24-02-2026T20:12:55-05:00>
console.log(Minggu depan); // Momen<2026-03-03T20:12:55-05:00>
Di sisi lain, objek Temporal tidak dapat diubah. Setelah Anda membuat objek seperti Instant, PlainDate, dan seterusnya, nilai objek tersebut tidak akan pernah berubah. Objek temporal juga memiliki metode tambah dan kurang. Temporal sedikit pilih-pilih tentang unit waktu mana yang dapat ditambahkan ke tipe objek mana. Misalnya, Anda tidak dapat menambahkan hari ke Instan:
const sekarang = Temporal.Sekarang.instant(); const Minggu Berikutnya = sekarang.tambahkan({ hari: 7 }); // RangeError: Kesalahan sementara: Satuan terbesar tidak boleh berupa satuan tanggal
Hal ini karena objek Instan mewakili titik waktu tertentu dalam UTC dan tidak bergantung pada kalender. Karena lamanya hari dapat berubah berdasarkan aturan zona waktu seperti Waktu Musim Panas, penghitungan ini tidak tersedia dalam Instan. Namun, Anda dapat melakukan operasi ini pada tipe objek lain, seperti PlainDateTime: const sekarang = Temporal.Sekarang.plainDateTimeISO(); console.log(sekarang.toLocaleString()); // 24/2/2026, 20:23:59
const Minggu Berikutnya = sekarang.tambahkan({ hari: 7 });
// Perhatikan bahwa PlainDateTime asli tetap tidak berubah console.log(sekarang.toLocaleString()); // 24/2/2026, 20:23:59
console.log(Minggu berikutnya.toLocaleString()); // 3/3/2026, 20:23:59
Anda juga dapat menghitung berapa lama waktu antara dua objek Momen atau Temporal. Dengan fungsi diff Momen, Anda perlu menyediakan satuan granularitas, jika tidak maka akan mengembalikan selisihnya dalam milidetik. const tanggal1 = momen('21-02-2026T09:00:00'); const tanggal2 = momen('22-02-2026T10:30:00');
konsol.log(tanggal2.diff(tanggal1)); // 91.800.000
console.log(tanggal2.diff(tanggal1, 'hari')); // 1
Untuk melakukan ini dengan objek Temporal, Anda dapat meneruskan objek Temporal lain ke metode sampai atau sejak itu. Ini mengembalikan objek Temporal.Duration yang berisi informasi tentang perbedaan waktu. Objek Durasi memiliki properti untuk setiap komponen perbedaan, dan juga dapat menghasilkan string durasi ISO 8601 yang mewakili perbedaan waktu.
const date1 = Temporal.PlainDateTime.from('21-02-2026T09:00:00'); const date2 = Temporal.PlainDateTime.from('22-02-2026T10:30:00');
// largeUnit menentukan satuan waktu terbesar yang akan direpresentasikan // dalam perhitungan durasi const diff = tanggal2.since(tanggal1, {Unit terbesar: 'hari' });
console.log(diff.hari); // 1
console.log(diff.jam); // 1
console.log(diff.menit); // 30
konsol.log(diff.toString()); // P1DT1H30M // (string durasi ISO 8601: 1 hari, 1 jam, 30 menit)
Membandingkan Tanggal Dan Waktu Momen dan Temporal memungkinkan Anda membandingkan tanggal dan waktu untuk menentukan tanggal dan waktu mana yang lebih dulu, namun menggunakan pendekatan yang berbeda dengan API. Moment menyediakan metode seperti isBefore, isAfter, dan isSame untuk membandingkan dua objek Moment. const tanggal1 = momen('21-02-2026T09:00:00'); const tanggal2 = momen('22-02-2026T10:30:00');
console.log(tanggal1.isBefore(tanggal2)); // benar
Temporal menggunakan metode perbandingan statis untuk melakukan perbandingan antara dua objek bertipe sama. Ia mengembalikan -1 jika tanggal pertama muncul sebelum tanggal kedua, 0 jika sama, atau 1 jika tanggal pertama muncul setelah tanggal kedua. Contoh berikut menunjukkan cara membandingkan dua objek PlainDate. Kedua argumen pada Temporal.PlainDate.compare harus berupa objek PlainDate.
const date1 = Temporal.PlainDate.from({ tahun: 2026, bulan: 2, hari: 24 }); const date2 = Temporal.PlainDate.from({ tahun: 2026, bulan: 3, hari: 24 });
// tanggal1 muncul sebelum tanggal2, jadi -1 console.log(Temporal.PlainDate.compare(date1, date2));
// Kesalahan jika kita mencoba membandingkan dua objek yang bertipe berbeda console.log(Temporal.PlainDate.compare(date1, Temporal.Now.instant())); // TypeError: Kesalahan sementara: Bidang PlainDate yang disediakan tidak valid.
Secara khusus, ini memudahkan pengurutan array objek Temporal secara kronologis. // Array objek Temporal.PlainDate tanggal const = [ ... ];
// gunakan Temporal.PlainDate.compare sebagai fungsi pembanding tanggal.sort(Temporal.PlainDate.compare);
Konversi Zona Waktu Pustaka inti Momen tidak mendukung konversi zona waktu. Jika Anda memerlukan fungsi ini, Anda juga perlu menginstal paket moment-timezone. Paket ini tidak mudah terguncang, dan oleh karena itu dapat menambah ukuran paket Anda secara signifikan. Setelah Anda menginstal zona waktu-momen, Anda dapat mengonversi objek Momen ke zona waktu yang berbeda dengan metode tz. Seperti operasi Momen lainnya, operasi ini mengubah operasi yang mendasarinyaobyek. // Dengan asumsi waktu AS Bagian Timur const sekarang = momen(); console.log(sekarang); // Momen<28-02-2026T20:08:20-05:00>
// Konversikan ke waktu Pasifik. // Waktu Timur yang asli telah hilang. sekarang.tz('Amerika/Los_Angeles'); console.log(sekarang); // Momen<28-02-2026T17:08:20-08:00>
Fungsionalitas zona waktu dibangun ke dalam API Temporal saat menggunakan objek Temporal.ZonedDateTime. Objek ini menyertakan metode withTimeZone yang mengembalikan ZonedDateTime baru yang mewakili momen waktu yang sama, namun dalam zona waktu yang ditentukan. // Sekali lagi, dengan asumsi waktu AS Bagian Timur const sekarang = Temporal.Sekarang.zonedDateTimeISO(); console.log(sekarang.toLocaleString()); // 28/2/2026, 20:12:02 EST
// Konversikan ke waktu Pasifik const nowPacific = sekarang.withTimeZone('Amerika/Los_Angeles'); console.log(nowPacific.toLocaleString()); // 28/2/2026, 17:12:02 PST
// Objek asli tetap tidak berubah console.log(sekarang.toLocaleString()); // 28/2/2026, 20:12:02 EST
Catatan: Nilai berformat yang dikembalikan oleh toLocaleString, sesuai dengan namanya, bergantung pada lokal. Kode contoh dikembangkan di lokal en-US, sehingga formatnya seperti ini: 28/2/2026, 17:12:02 PST. Di wilayah lain, hal ini mungkin berbeda. Misalnya, di lokal en-GB, Anda akan mendapatkan sesuatu seperti 28/2/2026, 17:12:02 GMT-8. Refactoring Dunia Nyata Misalkan kita sedang membuat aplikasi untuk menjadwalkan acara lintas zona waktu. Bagian dari aplikasi ini adalah fungsi, getEventTimes, yang mengambil string ISO 8601 yang mewakili waktu dan tanggal acara, zona waktu lokal, dan zona waktu target. Fungsi ini membuat string waktu dan tanggal yang diformat untuk acara di kedua zona waktu. Jika fungsi tersebut diberi string masukan yang bukan string waktu/tanggal yang valid, maka akan menimbulkan kesalahan. Inilah implementasi aslinya, menggunakan Moment (juga memerlukan penggunaan paket moment-timezone).
impor momen dari 'zona waktu-momen';
fungsi getEventTimes(inputString, userTimeZone, targetTimeZone) { const timeFormat = 'MMM D, YYYY, h:mm:ss a z';
// 1. Buat momen awal dalam zona waktu pengguna const eventTime = momen.tz( string masukan, moment.ISO_8601, // Harapkan string ISO 8601 benar, // Penguraian yang ketat zona waktu pengguna );
// Memunculkan kesalahan jika inputString tidak menunjukkan tanggal yang valid if (!eventTime.isValid()) { throw new Error('Input tanggal/waktu tidak valid'); }
// 2. Hitung target waktu // KRITIS: Kita harus mengkloning, atau 'eventTime' akan berubah selamanya! const targetTime = eventTime.clone().tz(targetTimeZone);
kembali { lokal: eventTime.format(format waktu), target: targetWaktu.format(Format waktu), }; }
jadwal const = getEventTimes( '2026-03-05T15:00-05:00', 'Amerika/New_York', 'Eropa/London', );
console.log(jadwal.lokal); // 5 Maret 2026, 15.00 EST
console.log(jadwal.target); // 5 Maret 2026, 20:00 GMT
Dalam contoh ini, kami menggunakan format tanggal yang diharapkan dari ISO 8601, yang terintegrasi ke dalam Momen. Kami juga menggunakan penguraian yang ketat, yang berarti Momen tidak akan mencoba menebak dengan string tanggal yang tidak cocok dengan formatnya. Jika string tanggal non-ISO dilewatkan, maka akan menghasilkan objek tanggal yang tidak valid, dan kita menimbulkan kesalahan. Implementasi Temporal terlihat serupa, namun memiliki beberapa perbedaan utama.
fungsi getEventTimes(inputString, userTimeZone, targetTimeZone) { // 1. Parsing input langsung ke dalam Instant, lalu buat // sebuah ZonedDateTime di zona pengguna. const instan = Temporal.Instan.dari(inputString); const eventTime = instan.toZonedDateTimeISO(userTimeZone);
// 2. Konversikan ke zona target // Ini secara otomatis mengembalikan objek BARU; 'eventTime' aman. const targetTime = eventTime.withTimeZone(targetTimeZone);
// 3. Format menggunakan Intl (bawaan) opsi konstan = { tahun: 'numerik', bulan: 'pendek', hari: 'numerik', jam: 'numerik', menit: '2 digit', kedua: '2 digit', NamaZona Waktu: 'pendek' };
kembali { lokal: eventTime.toLocaleString(navigator.bahasa, opsi), target: targetTime.toLocaleString(navigator.bahasa, opsi) }; }
jadwal const = getEventTimes( '2026-03-05T15:00-05:00', 'Amerika/New_York', 'Eropa/London', );
console.log(jadwal.lokal); // 5 Maret 2026, 15.00 EST
console.log(jadwal.target); // 5 Maret 2026, 20.00 GMT
Dengan Moment, kita harus secara eksplisit menentukan format string untuk string tanggal yang dihasilkan. Terlepas dari lokasi atau lokal pengguna, waktu acara akan selalu diformat sebagai 5 Mar 2026, 3:00:00sore EST. Selain itu, kita tidak perlu memberikan pengecualian secara eksplisit. Jika string yang tidak valid diteruskan ke Temporal.Instant.from, Temporal akan memberikan pengecualian untuk kita. Satu hal yang perlu diperhatikan adalah meskipun dengan penguraian yang ketat, versi Momen masih lebih lunak. Temporal memerlukan offset zona waktu di akhir string. Anda juga harus memperhatikan bahwa karena kita menggunakan navigator.bahasa, kode ini hanya akan berjalan di lingkungan browser, karena navigator tidak ditentukan di lingkungan Node.js. Implementasi Temporal menggunakan lokal browser saat ini (navigator.bahasa), sehingga pengguna akan secara otomatis mendapatkan waktu acara yang diformat dalam format waktu lokalnya. Di wilayah en-AS, ini tanggal 5 Maret 2026, 15.00 EST. Namun, jika pengguna berada di London, misalnya, waktu acara akan berformat 5 Mar 2026, 15:00:00 GMT-5. Ringkasan
Tindakan Momen.js Sementara Waktu saat ini momen() Temporal.Sekarang.zonedDateTimeISO() Mengurai ISO momen(str) Temporal.Instan.dari(str) Tambahkan waktu .add(7, 'hari') (bermutasi) .add({ hari: 7 }) (objek baru) Perbedaan .diff(lainnya, 'jam') .sejak(lainnya).jam Zona waktu .tz('Zona/Nama') .withTimeZone('Zona/Nama')
Pada pandangan pertama, perbedaannya mungkin sedikit berbeda (dan dalam kasus Temporal, terkadang lebih bertele-tele dan lebih ketat) sintaksisnya, namun ada beberapa keuntungan utama menggunakan Temporal dibandingkan Moment.js:
Menjadi lebih eksplisit berarti lebih sedikit kejutan dan bug yang tidak diinginkan. Momennya mungkin tampak lebih lunak, namun melibatkan “tebakan”, yang terkadang dapat mengakibatkan tanggal yang salah. Jika Anda memberikan sesuatu yang tidak valid kepada Temporal, kesalahan akan terjadi. Jika kode berjalan, Anda tahu bahwa Anda memiliki tanggal yang valid. Momen dapat menambah ukuran yang signifikan pada paket aplikasi, terutama jika Anda menggunakan paket zona waktu-momen. Temporal tidak menambahkan apa pun (setelah dikirimkan di browser target Anda). Kekekalan memberi Anda keyakinan bahwa Anda tidak akan pernah kehilangan atau menimpa data saat melakukan konversi tanggal dan operasi. Representasi waktu yang berbeda (Instan, PlainDateTime, ZonedDateTime) bergantung pada kebutuhan Anda, dengan Momen selalu membungkus stempel waktu UTC. Temporal menggunakan API Intl untuk pemformatan tanggal, yang berarti Anda dapat memiliki pemformatan sadar lokal tanpa harus menentukan token secara eksplisit.
Catatan Tentang Polyfill Seperti disebutkan sebelumnya, tersedia polyfill Temporal, didistribusikan sebagai paket npm bernama @js-temporal/polyfill. Jika Anda ingin menggunakan Temporal saat ini, Anda memerlukan polyfill ini untuk mendukung browser seperti Safari yang belum mengirimkan API. Kabar buruknya adalah ini akan menambah ukuran bundel Anda. Kabar baiknya adalah penambahannya masih jauh lebih sedikit dibandingkan momen atau zona waktu momen. Berikut perbandingan ukuran paket seperti dilansir Bundlephobia.com, website yang menyajikan informasi ukuran paket npm (klik pada masing-masing nama paket untuk melihat analisis Bundlephobia):
Paket Diperkecil Diperkecil & di-gzip @js-temporal/polyfill 154,1 kB 44,1kB momen 294,4kB 75,4kB zona waktu-momen 1 MB 114,2 kB
Polyfill juga secara historis memiliki beberapa masalah kinerja seputar penggunaan memori, dan pada saat penulisan, ini dianggap dalam keadaan alfa. Oleh karena itu, Anda mungkin tidak ingin menggunakannya dalam produksi hingga mencapai kondisi yang lebih matang. Kabar baik lainnya adalah semoga polyfill tidak diperlukan lebih lama lagi (kecuali Anda perlu mendukung browser lama, tentunya). Pada saat penulisan, Temporal telah dikirimkan dalam Chrome, Edge, dan Firefox. Ini belum siap di Safari, meskipun tampaknya tersedia dengan tanda runtime pada Pratinjau Teknologi terbaru.
