Mengoordinasikan Peristiwa Global dengan Temporal

Fitur web: Temporal

Menjadwalkan acara di berbagai zona waktu sangat sulit dilakukan dengan objek Date lama, terutama di sekitar transisi Waktu Musim Panas (DST) saat jam dapat dilewati atau diulang.

Temporal API menyediakan Temporal.ZonedDateTime untuk merepresentasikan tanggal dan waktu dalam zona waktu tertentu, menangani transisi DST secara otomatis dan dapat diprediksi.

Cara Menerapkan

Untuk mengoordinasikan acara global dan menangani potensi konflik DST:

  1. WAJIB: Buat ZonedDateTime: Gunakan Temporal.ZonedDateTime.from() untuk membuat objek tanggal-waktu yang mengetahui zona waktu.
  2. WAJIB: Tangani Ambiguitas: Gunakan opsi disambiguation untuk mengontrol perilaku saat waktu ambigu atau tidak ada (misalnya, selama perubahan jam).
  3. WAJIB: Mengonversi Zona Waktu: Gunakan .withTimeZone() untuk melihat waktu yang setara di lokasi lain.

Contoh: Penjadwalan dan Deteksi Konflik

// 1. Define the event time and target time zone
const date = "2025-03-09";
const time = "02:30"; // This time is skipped in New York during Spring Forward
const timeZone = "America/New_York";
const inputStr = `${date}T${time}[${timeZone}]`;

// 2. Detect conflicts using 'reject'
let hasConflict = false;
try {
  // 'reject' throws RangeError if the time is ambiguous or does not exist
  Temporal.ZonedDateTime.from(inputStr, { disambiguation: 'reject' });
} catch (e) {
  if (e instanceof RangeError) {
    hasConflict = true;
    console.log("This time falls in a DST transition gap or overlap.");
  }
}

// 3. Resolve the time safely using 'compatible' (default)
// 'compatible' will resolve to a valid time even if skipped or repeated
const hostTime = Temporal.ZonedDateTime.from(inputStr, { disambiguation: 'compatible' });
console.log(`Resolved time: ${hostTime.toString()}`);

// 4. Convert to another time zone (e.g., Tokyo)
const tokyoTime = hostTime.withTimeZone("Asia/Tokyo");
// Use toLocaleString() for user-facing display instead of manual hour/minute padding
console.log(`Tokyo time: ${tokyoTime.toLocaleString('en-US', { hour: 'numeric', minute: '2-digit' })}`);

Penerapan Strategis & Praktik Terbaik

  • LAKUKAN penggunaan Temporal.ZonedDateTime untuk acara yang terikat dengan lokasi geografis tertentu (seperti rapat di kota tertentu).
  • LAKUKAN penggunaan disambiguation: 'reject' jika Anda perlu mendeteksi dan memperingatkan pengguna tentang konflik penjadwalan selama transisi DST.
  • GUNAKAN disambiguation: 'compatible' (default) jika Anda ingin sistem otomatis memilih waktu yang tepat saat terjadi konflik.
  • JANGAN gunakan Temporal.PlainDateTime untuk acara global, karena tidak membawa informasi zona waktu dan tidak dapat memperhitungkan perubahan DST.
  • LAKUKAN penggunaan .withTimeZone() untuk menghitung waktu yang setara di lokasi lain tanpa mengubah objek asli (objek Temporal tidak dapat diubah).
  • LAKUKAN penggunaan pemformatan .toLocaleString() native (seperti { hour: 'numeric', minute: '2-digit' }) untuk tampilan waktu yang ditampilkan kepada pengguna, bukan penghitungan dan padding waktu manual.

Strategi Penggantian

Penggantian & dukungan browser untuk Temporal

Untuk browser yang belum mendukung Temporal API native, gunakan deteksi fitur dan muat temporal-polyfill secara dinamis (~15 KB min+gz).

Perhatikan bahwa mengimpor temporal-polyfill tidak otomatis menetapkan objek Temporal ke cakupan global. Tetapkan secara eksplisit jika kode Anda mengandalkan globalThis.Temporal.

// Check if Temporal is supported natively
(async () => {
  if (typeof Temporal === 'undefined') {
    // Load the polyfill conditionally
    const module = await import('https://esm.sh/temporal-polyfill');
    globalThis.Temporal = module.Temporal;
    // Extend Date.prototype if needed
    Date.prototype.toTemporalInstant = module.toTemporalInstant;
  }
  initializeApp();
})();