Input Waktu HTML: Format 24 Jam, min, max, step, dan Detik

Referensi HTML

Dibuat 2026-10-30 Terakhir Diubah 2026-10-30

HTML input type="time" menerima waktu dalam sehari. Meskipun antarmuka menampilkan AM/PM, nilainya umumnya berupa string 24-jam seperti 09:30, atau 13:10:20 ketika detik disertakan. min/max menetapkan batas, dan step menetapkan interval dalam detik.

Membedakan format tampilan dari nilai

Antarmuka input bervariasi menurut sistem operasi, browser, dan bahasa pengguna. Jangan mengharapkan setiap dropdown atau pemilih terlihat sama. Gunakan string yang valid seperti 13:30 sebagai nilai awal, bukan teks tampilan yang diterjemahkan seperti 1:30 PM. Tetapkan nilai awal dengan atribut value dan baca pilihan pengguna saat ini melalui input.value.

Nilai waktu tidak memiliki tanggal atau zona waktu. Itu tidak dapat memberi tahu Anda apakah pukul 9 pagi berarti Seoul atau lokasi lain. Untuk pemesanan yang mengidentifikasi momen sebenarnya, kumpulkan tanggal dan zona waktu referensi juga dan tafsirkan secara konsisten di server. Untuk durasi seperti 90 menit, pilih format yang sesuai seperti jumlah menit numerik daripada menggunakan kembali kontrol waktu.

Tetapkan batas dan interval

Atribut	Contoh	Makna
`value`	`09:30`	Waktu awal; harus sesuai dengan rentang dan langkah serta format.
`min`, `max`	`09:00`, `18:00`	Batas inklusif untuk waktu yang diizinkan.
`step`	`900`	900 detik adalah 15 menit. Default 60 adalah satu menit; 1 adalah satu detik.
`required`	Atribut boolean	Memblokir pengiriman biasa saat kosong.
`name`	`meeting`	Nama bidang yang dikirimkan; hanya id tidak membuat nama data.

Jika min valid tersedia, gunakan min sebagai dasar; jika tidak, gunakan atribut HTML value yang valid; jika keduanya tidak ada, gunakan 00:00:00. Untuk min="09:00" step="900", 09:00, 09:15, dan 09:30 valid, tetapi 09:10 tidak sesuai. Ini tidak menentukan slot pemesanan yang tersedia atau hari-hari libur; terapkan aturan layanan secara terpisah.

Contoh lengkap: interval 15 menit dan detik

Simpan kode ini sebagai time.html dan buka di browser. Tidak diperlukan server untuk memeriksa validasi dan nilai yang dikirim. Input kedua secara eksplisit menggunakan step="1" untuk memungkinkan detik.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rentang waktu dan detik</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Pilih waktu</h1>
  <form id="demo">
    <label for="meeting">Rapat (09:00–18:00, langkah 15 menit)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Pemeriksaan (13:00–15:00, langkah satu detik)</label>
    <input id="checkpoint" name="checkpoint" type="time"
      min="13:00:00" max="15:00:00" step="1" value="13:10:20" required>
    <p><button type="submit">Tampilkan nilai kiriman</button>
      <button type="reset">Atur ulang</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

Kirim awalnya: meeting adalah 09:30 dan checkpoint adalah 13:10:20. Output menggunakan format 24 jam meskipun antarmuka pengguna menggunakan AM/PM.
Setel waktu rapat ke 08:45 untuk gagal dalam validasi rentang. 09:10 berada dalam rentang tetapi gagal pada langkah 15 menit. 09:45 berhasil disubmit.
Kosongkan waktu rapat sepenuhnya dan submit untuk memeriksa validasi yang diperlukan. Pulihkan waktu yang valid, lalu ubah detik pada input kedua untuk membandingkan output tingkat detik.
Ubah hanya checkpoint dari step="1" menjadi step="60" dan buka kembali file tersebut. 13:10:20 awal berbeda 20 detik dari langkah satu menit dari 13:00:00 dan tidak valid. Pulihkan langkah ke 1 setelahnya.
Reset mengembalikan rapat ke 09:30 dan checkpoint ke 13:10:20.

Rentang waktu melewati tengah malam dan validasi server

Input waktu dapat mengekspresikan rentang melewati tengah malam. Misalnya, min="22:00" max="02:00" berarti pukul 10 malam hingga tengah malam sampai pukul 2 pagi. Ini bukan interval yang berisi tanggal sebenarnya, jadi tidak secara otomatis memilih tanggal hari berikutnya. Periksa dukungan untuk validasi ini di browser target Anda dan terapkan aturan yang sama di server.

Pemilih dan pesan validasi peramban tidak menggantikan validasi server. Server harus memeriksa format, rentang, dan langkah string yang diterima dan menggabungkannya dengan tanggal yang diperlukan, zona waktu, dan ketersediaan pemesanan. %3A dalam URL GET adalah titik dua yang dikodekan; parsing nilai formulir secara normal menghasilkan string seperti 09:30.

Jika tanggal juga diperlukan, lihat nilai dan batas input date. Untuk format waktu dan atribut, lihat referensi time di MDN.

Referensi HTML