Input Tanggal HTML: value, min, max, step, dan Format
HTML <input type="date"> menyediakan kontrol untuk tahun, bulan, dan hari. Tampilan kalender dan urutan yang ditampilkan dapat berbeda tergantung browser dan lokal, tetapi nilai dan nilai yang dikirim dinormalisasi ke YYYY-MM-DD. Nilai tersebut tidak termasuk waktu atau zona waktu.
Tetapkan tanggal awal dan rentang yang diizinkan
Gunakan value untuk tanggal awal dan min/max untuk tanggal paling awal dan paling akhir yang diperbolehkan. Kedua batas termasuk. Atribut memerlukan string tanggal yang valid daripada teks tampilan yang dilokalkan seperti “20 Mei 2030.” Nilai min atau max yang tidak valid mungkin tidak memberlakukan batasan yang diinginkan.
name adalah nama field yang dikirimkan dan id mengasosiasikan label. Gunakan required untuk input yang wajib. Rentang tidak membuat setiap browser mencegah entri tanggal dengan cara yang sama; tanggal yang berada di luar rentang yang dimasukkan langsung akan gagal dalam validasi batasan.
Contoh lengkap: periksa string tanggal dan validitas
Simpan dokumen berikut sebagai date-demo.html dan buka di browser. Ini menampilkan tanggal yang dipilih dalam Mei 2030 untuk latihan, tanpa membuat pemesanan atau mengirim data ke server.
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Memeriksa nilai tanggal</title>
</head>
<body>
<h1>Latihan tanggal kunjungan</h1>
<form id="demo">
<label for="visit">Tanggal kunjungan (Mei 2030, wajib)</label>
<input type="date" id="visit" name="visit"
value="2030-05-20" min="2030-05-01" max="2030-05-31" step="1" required>
<button type="submit">Tampilkan nilai</button>
<button type="reset">Atur ulang</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.getElementById('demo');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = 'visit = ' + new FormData(form).get('visit');
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Kirim tanggal awal untuk menampilkan:
visit = 2030-05-20 - Pilih tanggal Mei lain dan kirim untuk menampilkan string tanggalnya. Tanggal di luar jangkauan diblokir oleh validasi min/max.
- Bersihkan tanggal dan kirim: validasi wajib memblokirnya. Reset mengembalikan ke 20 Mei.
Unit step adalah hari dan defaultnya adalah 1. Ubah hanya langkah menjadi 7 dalam contoh: 1 Mei, tanggal minimum, menjadi dasar, sehingga 1, 8, 15, 22, dan 29 Mei cocok dengan interval. Nilai awal 20 Mei tidak lagi cocok. Bandingkan pilihan 8 Mei yang valid, lalu kembalikan langkah ke 1 untuk memungkinkan setiap hari. Satu pengaturan langkah tidak menerapkan kalender bisnis dengan akhir pekan atau hari libur.
Format tampilan, zona waktu, dan validasi server
Jangan menempatkan garis miring atau string yang dilokalisasi dalam nilai untuk mengubah pemilih tanggal spesifik-lokal. Jika Anda hanya membutuhkan tanggal kalender, memperlakukannya sebagai string menghindari konversi zona waktu yang tidak perlu. Data yang juga membutuhkan waktu memerlukan lebih dari sekadar tanggal dan kebijakan zona waktu terpisah.
Kontrol lebar dengan CSS daripada atribut ukuran. Berikan label dan penjelasan rentang, serta validasi tanggal yang sebenarnya, tahun kabisat, rentang, dan ketersediaan bisnis di server untuk kontrol yang tidak didukung atau permintaan yang melewati pemeriksaan browser. Memilih tanggal tidak memesan tempat atau mengonfirmasi ketersediaan tempat terkini yang dicatat server. Referensi input tanggal MDN menjelaskan aturan atribut.
