Ketik 20/9/2026, atau pilih dari kalender.
Nilai tersimpan: 2026-09-20
FormDatePicker
Kolom tanggal yang bisa diketik maupun dipilih dari kalender: satu tanggal, rentang tanggal, dengan atau tanpa jam.
Dasar
Nilai tersimpan selalu dalam bentuk yang siap dikirim ke server (2026-09-20), sedangkan yang terlihat di kolom ditulis seperti kebiasaan di sini (20/09/2026). Kolomnya bisa diketik: 20/9/2026, 20-09-2026, maupun 2026-09-20 sama-sama diterima, dan dirapikan saat kolom ditinggalkan.
Loncat bulan dan tahun
Judul di atas kalender bisa diklik: sekali untuk memilih bulan, sekali lagi untuk memilih tahun, dan sekali lagi kembali ke tanggal. Panah di kiri dan kanan melangkah sesuai tampilan yang sedang terbuka — satu bulan di tampilan tanggal, satu tahun di tampilan bulan, dan dua belas tahun di tampilan tahun. Untuk tanggal lahir, cara ini jauh lebih cepat daripada menelusuri bulan satu per satu. Lewat keyboard, PageUp dan PageDown berpindah bulan, dan dengan Shift berpindah tahun.
Ketik 20/9/2026, atau pilih dari kalender.
Nilai tersimpan: 2026-09-20
Rentang tanggal
Dengan range, klik pertama menetapkan tanggal awal dan klik kedua tanggal akhir; kalender tetap terbuka di antaranya. Urutan klik tidak masalah — bila tanggal kedua lebih awal, keduanya ditukar. Nilai tersimpan menjadi dua tanggal, dan kolomnya juga bisa diketik dengan pemisah spasi-tanda hubung-spasi.
Klik tanggal awal, lalu tanggal akhir.
Nilai tersimpan: 2026-10-05 → 2026-10-09
Pilih bulan, bukan hari
type="month" menjadikan bulan itu sendiri nilainya. Panelnya langsung membuka daftar bulan — tidak ada grid harinya sama sekali — dan panah kiri–kanan melangkah per tahun.
Yang disimpan tetap ISO: YYYY-MM, atau [mulai, selesai] bila memakai range. Yang ditampilkan di kolomnya "Oktober 2026", dalam locale kolom itu. Nilainya sengaja tidak disimpan sebagai "Oktober 2026": teks itu berbeda per locale, tidak bisa diurutkan, dan tidak bisa dibaca balik — memformatnya untuk pembaca adalah tugas aplikasi, sama seperti di komponen lain.
Kolomnya juga menerima ketikan: 10/2026, 2026-10, atau nama bulannya — "Oktober 2026" maupun "okt 2026". min dan max ikut dibaca sebagai bulan.
Tersimpan: 2026-10
Tersimpan: ["2026-01","2026-06"]
Tanggal dengan jam
Dengan type="datetime", kalender tidak langsung menutup setelah tanggal dipilih karena jamnya belum diisi. Jam memakai kolom waktu bawaan browser, sehingga di ponsel muncul pemilih jam milik sistem.
Tanggal dan jam keberangkatan truk.
Nilai tersimpan: 2026-09-22T08:00
Batas tanggal dan status
min dan max membatasi kalender sekaligus apa yang boleh diketik. Tanggal di luar batas tetap terlihat di kalender tapi tidak bisa dipilih, supaya orang paham batasnya. Status error, readonly, dan disabled diwarisi dari FormField seperti kontrol lain.
Hanya 1 Oktober sampai 31 Desember 2026.
Tanggal belum dipilih.
Hanya dibaca.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| v-model | string | — | Tanggal dalam bentuk 2026-09-20, atau 2026-09-20T14:30 bila type=datetime. Kosong berarti string kosong. |
| type | 'date' | 'datetime' | 'date' | Tanggal saja, atau tanggal dengan jam. Pada datetime kalender tetap terbuka setelah tanggal dipilih. |
| range | boolean | false | Pilih dua tanggal. Nilainya menjadi [awal, akhir], dan [awal, ""] selagi ujungnya belum dipilih. Tidak bisa digabung dengan type=datetime. |
| min / max | string | — | Batas tanggal terawal dan terakhir (2026-10-01). Tanggal di luar batas tidak bisa dipilih maupun diketik. |
| locale | string | 'id-ID' | Menentukan nama bulan dan nama hari di kalender. |
| first-day-of-week | number | 1 | 1 untuk Senin seperti kalender Indonesia, 0 untuk Minggu. Kolom Minggu selalu ditulis merah, di posisi mana pun ia jatuh. |
| clearable | boolean | true | Tombol hapus di kolom dan di dasar kalender. |
| placeholder | string | dd/mm/yyyy | Teks contoh format di kolom kosong. |
| open-label / today-label / clear-label / done-label / time-label | string | Buka kalender / Hari ini / Hapus tanggal / Selesai / Jam | Teks tombol dan nama aksesibel, semuanya bisa diganti. |
| size / id / disabled / readonly / required / invalid | — | — | Sama seperti kontrol form lain, termasuk pewarisan dari FormField. |
Atribut name diteruskan ke input tersembunyi yang membawa nilai tersimpan, jadi FormData berisi 2026-09-20, bukan teks di layar. Atribut lain dan ARIA menuju kolom teks; class/style menuju pembungkus. Ref komponen menyediakan focus(), blur(), open(), dan close().