0Pricing
JavaScript Academy · Pelajaran

Memformat Tanggal dan Waktu

Tampilkan tanggal dengan Intl.DateTimeFormat.

Memformat Tanggal dan Waktu adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Intl.DateTimeFormat

Intl.DateTimeFormat memformat objek Date berdasarkan lokal, sehingga Anda tidak perlu membangun string secara manual dengan cara yang rapuh.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Perbedaan Lokal

Urutan tanggal berbeda menurut wilayah: US menggunakan bulan/hari/tahun, sedangkan sebagian besar Eropa menggunakan hari/bulan/tahun.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Prasetel Gaya Tanggal

dateStyle menyediakan prasetel "full", "long", "medium", dan "short" untuk keluaran yang cepat dan mudah dibaca.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Gaya Waktu

timeStyle bekerja dengan cara yang sama untuk bagian waktu dan dapat digabungkan dengan dateStyle.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Opsi Komponen Khusus

Untuk pengendalian yang lebih terperinci, tentukan komponen seperti year, month, day, dan weekday satu per satu.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Format Bulan

month menerima "numeric", "2-digit", "short", "long", dan "narrow".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

Jam 12 vs 24

hour12: true/false mengganti pengaturan bawaan lokal untuk format jam.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Zona Waktu

Berikan nama IANA kepada timeZone untuk menampilkan tanggal dalam zona mana pun, terlepas dari zona lokal runtime.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts mengembalikan larik token bertipe, sehingga Anda dapat memberi gaya atau mengubah susunan setiap bagian.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Memformat Rentang

formatRange(start, end) menampilkan rentang tanggal secara ringkas dengan menggabungkan komponen yang sama.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Kalender Non-Gregorius

Opsi calendar mendukung sistem seperti "islamic", "hebrew", atau "japanese".

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Uji Cepat

Uji pemformatan tanggal.

Rangkuman: Tanggal dan Waktu

Anda memformat tanggal dan waktu dengan Intl.DateTimeFormat, menggunakan prasetel dateStyle/timeStyle dan opsi komponen terperinci, menangani zona waktu, jam 12/24, formatToParts, rentang, serta kalender alternatif. Berikutnya: waktu relatif dan bentuk jamak.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memformat Tanggal dan Waktu” gratis?

Ya — teks lengkap “Memformat Tanggal dan Waktu” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memformat Tanggal dan Waktu”?

Tampilkan tanggal dengan Intl.DateTimeFormat. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Memformat Tanggal dan Waktu” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Memformat Angka dan Mata Uang
  2. Memformat Tanggal dan Waktu
  3. Waktu Relatif dan Bentuk Jamak
  4. Pengurutan Sesuai Lokal
← Kembali ke JavaScript Academy