Date dan Time Input

Museum Nusantara membuka pemesanan tiket, dan setiap pemesanan wajib menyertakan tanggal kunjungan. Bila tanggal diminta lewat <input type="text">, pengunjung dapat menulis “10 Juli”, “10/07/2025”, atau salah tahun, dan server harus menebak maksudnya. HTML menyediakan lima tipe input khusus tanggal dan waktu yang menampilkan kalender atau pemilih waktu bawaan browser. Pada Chapter ini kita mengenal kelima tipe tersebut beserta format nilainya, pembatasan rentang, dan perilaku fallback pada browser yang belum mendukung.

Lima Tipe Input Tanggal dan Waktu #

Kelima tipe berikut menghasilkan nilai yang terstruktur, sehingga server dapat membandingkan dan menyimpan tanggal tanpa perlu menguraikan teks bebas:

Semua tipe memakai format nilai standar internasional (ISO 8601), sehingga data yang terkirim konsisten di seluruh wilayah. Nama datetime-local menegaskan bahwa nilainya tidak menyertakan informasi zona waktu; penanganan zona menjadi tanggung jawab aplikasi di belakangnya.

Format Tampilan versus Format Nilai #

Browser menampilkan tanggal sesuai bahasa dan wilayah pengunjung: pengaturan Indonesia memunculkan 10/07/2025, sementara pengaturan Amerika menampilkan 07/10/2025. Yang dikirim saat form dikirim tetap berupa format nilai 2025-07-10, bukan teks yang tampil di layar. Berkat pemisahan ini, kode kita tidak perlu menyesuaikan format per negara, tetapi juga tidak boleh mengurai teks tampilan; bila nilai perlu dibaca melalui JavaScript, ambil dari properti value kontrolnya.

Membatasi Rentang dengan Min, Max, dan Step #

Atribut min dan max membatasi tanggal terawal dan terakhir yang dapat dipilih, ditulis dengan format nilai yang sama seperti pada tabel di atas. Picker kalender menonaktifkan tanggal di luar rentang secara visual, dan browser memeriksa ulang nilainya saat form dikirim. Atribut step mengatur jarak antar nilai yang sah; pada date satuannya hari dengan nilai default 1, sehingga step="7" hanya mengizinkan tanggal yang berjarak sepekan, sedangkan pada time satuannya detik. Pembahasan lengkap validasi browser menunggu pada section Form Validation.

Dukungan Browser dan Fallback #

Dukungan kelima tipe tidak merata: date dan time kini tersedia di hampir semua browser modern, sedangkan month dan week masih terbatas pada sebagian browser. Browser yang tidak mengenali sebuah tipe akan menampilkan kontrol sebagai input teks biasa, persis seperti type="text". Dalam kondisi fallback tersebut pengunjung mengetik bebas, sehingga data yang masuk perlu diperiksa ulang di server. Strategi paling aman adalah menguji browser target dan menyiapkan pemeriksaan server untuk format YYYY-MM-DD.

Contoh: Form Pemesanan dengan Tanggal #

File berikut memuat form pemesanan tiket museum dengan tanggal kunjungan yang dibatasi pada Juli 2025 dan jam kedatangan berkelipatan 15 menit. Simpan sebagai contoh-pemesanan.html lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemesanan Tiket Museum</title>
</head>
<body>
  <h1>Pemesanan Tiket Museum Nusantara</h1>
  <form action="www.example.com/tiket" method="post">
    <p>
      <label for="tanggal">Tanggal kunjungan</label><br>
      <input type="date" id="tanggal" name="tanggal"
             min="2025-07-01" max="2025-07-31">
    </p>
    <p>
      <label for="jam">Jam kedatangan</label><br>
      <input type="time" id="jam" name="jam" min="08:00" max="16:00" step="900">
    </p>
    <p><button type="submit">Pesan Tiket</button></p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Kotak tanggal dengan ikon kalender; tanggal di luar 1-31 Juli 2025
    tampil pudar dan tidak dapat dipilih
  - Kotak waktu dengan pilihan berkelipatan 15 menit antara 08:00 dan 16:00
  - Tombol "Pesan Tiket" di bagian bawah form

Mari kita telaah peran setiap baris pentingnya:

1. Baris 13-14 (input date): min dan max membatasi kunjungan pada Juli 2025; nilai yang terkirim berformat YYYY-MM-DD, misalnya 2025-07-10.
2. Baris 18 (input time): step="900" berarti 900 detik atau 15 menit, sehingga pilihan menit hanya 00, 15, 30, dan 45; min dan max membatasi jam operasional museum.
3. Baris 20 (button): mengirim kedua nilai; tampilan tanggal mengikuti wilayah pengunjung, tetapi format nilai tetap ISO.

Kontrol tanggal mengisi form dengan data terstruktur, dan pertanyaan berikutnya adalah ke mana data itu dikirim serta bagaimana caranya. Chapter Form Action dan Method menjawabnya lewat atribut action, perbandingan method GET dan POST, hingga enctype.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Input date
• MDN Web Docs — Atribut min
• MDN Web Docs — Atribut step
• web.dev — Learn Forms

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pemesanan Tiket Museum</title>
</head>
<body>
  <h1>Pemesanan Tiket Museum Nusantara</h1>
  <form action="www.example.com/tiket" method="post">
    <p>
      <label for="tanggal">Tanggal kunjungan</label><br>
      <input type="date" id="tanggal" name="tanggal"
             min="2025-07-01" max="2025-07-31">
    </p>
    <p>
      <label for="jam">Jam kedatangan</label><br>
      <input type="time" id="jam" name="jam" min="08:00" max="16:00" step="900">
    </p>
    <p><button type="submit">Pesan Tiket</button></p>
  </form>
</body>
</html>