inputdatetimeMenengah3 mnt baca

Input Tanggal dan Waktu

Pakai date, time, datetime-local, month, week: kalender bawaan browser gratis.

Kenapa Browser Menyediakan Kalender Gratis

Coba ingat terakhir kali kamu mengisi tanggal lahir di sebuah website. Muncul kalender kecil yang bisa diklik, bukan? Sekarang bayangkan kalau setiap programmer harus membuat kalender seperti itu sendiri dengan JavaScript: mengatur jumlah hari tiap bulan, tahun kabisat, dan tampilan yang rapi di HP. Itu pekerjaan berhari-hari untuk satu field saja. Masalah kedua: format tanggal berantakan antarnegara. Orang Indonesia menulis 10/08/2026 sebagai 10 Agustus, orang Amerika membacanya sebagai 8 Oktober. HTML memecahkan dua masalah ini sekaligus dengan input tanggal dan waktu bawaan: browser menampilkan pemilih tanggal yang rapi dan selalu mengirim nilai dalam format standar ISO yang tidak ambigu.

Contoh 1: Tanggal Lahir Sederhana

html

<form action="/daftar" method="post">
  <p>Tanggal lahir: <input type="date" name="lahir" /></p>
  <button type="submit">Kirim</button>
</form>

Satu baris, dan kamu langsung dapat date picker bawaan browser yang tampilannya menyesuaikan bahasa dan perangkat pengguna. Nilai yang dikirim selalu YYYY-MM-DD, misalnya 2008-05-21, apa pun bahasa browsernya.

Contoh 2: Form Booking Lapangan Futsal

html

<form action="/booking" method="post">
  <p>Tanggal main: <input type="date" name="tanggal" min="2026-10-08" value="2026-10-10" /></p>
  <p>Jam mulai: <input type="time" name="jam" min="08:00" max="21:00" /></p>
  <p>Durasi (jam): <input type="number" name="durasi" min="1" max="3" value="2" /></p>
  <button type="submit">Booking</button>
</form>

Di sini min dan max menegakkan logika bisnis langsung di browser: tanggal tidak boleh kemarin (min="2026-10-08"), jam main hanya jam operasional lapangan, dan value memberi nilai awal yang masuk akal supaya pengguna tinggal menyesuaikan.

Keluarga Lengkap dan Format Nilainya

date: 2026-10-08 (YYYY-MM-DD)
time: 14:30 (HH:MM, format 24 jam)
datetime-local: 2026-10-08T14:30 (tanggal plus jam, tanpa zona waktu)
month: 2026-10 (untuk laporan bulanan)
week: 2026-W41 (untuk minggu ke-41 tahun 2026)

Format yang konsisten ini memudahkan server: tidak ada lagi tebak-tebakan apakah 10/08 itu Oktober atau Agustus.

Kesalahan Umum

1. Menulis min/max dengan format lokal. Browser hanya paham format ISO. min="08-10-2026" akan diabaikan diam-diam, seolah batasnya tidak ada.

html

<!-- SALAH: format lokal, diabaikan browser -->
<input type="date" name="tanggal" min="08-10-2026" />

<!-- BENAR: format ISO -->
<input type="date" name="tanggal" min="2026-10-08" />

2. Mengira datetime-local menyimpan zona waktu. Namanya sudah jujur: local, waktu lokal tanpa zona waktu. Untuk jadwal les di kotamu ini cukup. Tapi untuk event yang dilihat orang beda negara, simpan sebagai UTC di server dan konversi saat ditampilkan.

Catatan teknis: Dukungan date picker bawaan sudah luas di browser modern, tapi tampilannya berbeda-beda tiap browser dan tidak bisa di-style penuh dengan CSS. Kalau butuh kalender dengan desain khusus perusahaan, di situlah kamu baru mempertimbangkan date picker JavaScript.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Booking Ruangan

Buat form booking dengan: date (min = hari ini 2026-10-08), time (min 08:00, max 21:00), dan month untuk laporan bulanan. Semua wajib punya name. Tantangan ini melatihmu memakai batasan min/max untuk menegakkan aturan bisnis (jam operasional, tanggal valid) langsung di browser, pola yang muncul di hampir semua aplikasi booking dan reservasi.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Booking</title>
</head>
<body>
  <h1>Booking Ruangan</h1>
  <form>
    <!-- tiga input di sini -->
  </form>
</body>
</html>

Open Sandbox