- Panduan yang mengusulkan metode input yang sederhana dan mudah diakses sebagai pengganti JavaScript date picker yang rumit
- Dengan memanfaatkan elemen input bawaan browser (
date, time, datetime-local), kita bisa otomatis mendapatkan aksesibilitas, performa, dan dukungan internasionalisasi
- UI yang kompleks bisa disederhanakan lewat field input terpisah, masked input, atau grup tombol radio
- Bahkan di framework seperti React, elemen input HTML bawaan tetap bisa digunakan apa adanya; styling memang terbatas, tetapi UI sistem yang familier bagi pengguna tetap terjaga
- Karena semua date picker memiliki masalah aksesibilitas, struktur input yang sederhana dan pengujian dengan pengguna nyata adalah kunci desain form yang sukses
Apakah JavaScript date picker benar-benar diperlukan?
- Dalam kebanyakan kasus, JavaScript date picker terpisah tidak diperlukan
- UI yang kompleks memicu kesalahan dan membuat pengguna membatalkan pengisian form
- Ada cara input tanggal yang lebih mudah daripada widget kalender
- Panduan ini bertujuan menawarkan alternatif untuk antarmuka yang ramah pengguna
Input tanggal dan waktu bawaan browser
- Semua browser modern mendukung tipe input bawaan
date, time, dan datetime-local
date untuk memilih tanggal, time untuk memasukkan jam dan menit, datetime-local menggabungkan keduanya
- Input bawaan bisa diterapkan hanya dengan satu baris kode, dan browser menangani aksesibilitas, performa, serta internasionalisasi
- Mendukung input keyboard dan menyediakan UI kalender bawaan
- Tidak sempurna, tetapi lebih stabil daripada kebanyakan library JavaScript
- Meski begitu, beberapa masalah aksesibilitas masih tetap ada
Input terpisah dan elemen pilihan
- Dibanding satu date picker, input tahun, bulan, dan hari yang dipisah dapat meningkatkan usability
- Diberikan contoh komponen date input dari GOV.UK
- Jika data validnya terbatas, penggunaan elemen
select lebih tepat
- Mencegah kesalahan input dan mengurangi interaksi
- Perlu berhati-hati karena pembaca layar bisa salah membaca bulan dalam format angka
- Untuk interval waktu tetap seperti pemesanan perjalanan (misalnya kelipatan 15 menit), representasi tanggal relatif seperti hari ini atau besok berguna
Masked input dan validasi
- Field masked input adalah alternatif untuk mengarahkan format tanggal tanpa kalender
- Validasi dan pemformatan di sisi klien dapat dilakukan dengan JavaScript
- Contoh: pesan error seperti “Masukkan tanggal yang valid untuk Februari (1~28)”
- Gunakan API
Intl untuk memformat tanggal secara otomatis
- Namun, jika JavaScript memperbarui nilai input, fitur undo/redo bisa rusak
- Dengan CSS, beberapa input bisa digabung agar secara visual terlihat seperti satu elemen
Pemilihan rentang dan opsi terbatas
- Date picker pemilihan rentang yang memakai dua kalender sulit dioperasikan dan tidak nyaman digunakan tanpa pointer
- Sebagai gantinya, bisa disederhanakan menjadi dua field input
- Jika hanya tanggal tertentu yang boleh dipilih, ini bisa diganti dengan grup input radio
- Alih-alih UI kompleks, gunakan alur kerja bertahap yang sederhana
- Form multi-langkah dapat diperluas menjadi interaksi satu halaman dengan JavaScript
Input bebas dan fitur saran
- Saat tanggal atau waktu yang presisi tidak diperlukan, input teks biasa bisa berguna
- Dengan elemen
datalist, saran input dapat diberikan
- Juga dapat digunakan bersama tipe input
date dan time
Pertanyaan yang sering diajukan
Saat menggunakan framework JavaScript
- Semua framework utama dapat menggunakan elemen HTML bawaan
- Tidak perlu membuatnya sebagai komponen kustom
- Binding status dua arah dimungkinkan melalui properti
value
Styling date picker bawaan
- Hanya sebagian dari elemen
input yang bisa diberi style, sisanya tidak
- Ini justru menjadi kelebihan karena mempertahankan UI sistem yang familier bagi pengguna
- Desain berbeda tergantung sistem operasi, metode input, dan browser
- Penyatuan desain tambahan tidak diperlukan
Menanggapi stakeholder yang meminta JavaScript date picker
- Tujuannya adalah submit form yang berhasil, dan UI yang kompleks meningkatkan kesalahan
- Semua date picker memiliki masalah aksesibilitas
- Kombinasi input bawaan lebih ramah pengguna
- UI JavaScript yang belum teruji bisa melanggar regulasi seperti European Accessibility Act (EAA)
- Kesederhanaan adalah kunci keberhasilan
Pengujian dan jaminan aksesibilitas
- Memahami panduan aksesibilitas seperti WCAG itu penting
- Manfaatkan standar web untuk mencegah kesalahan pada UI kustom
- Kesalahan bisa dideteksi dengan fitur aksesibilitas di developer tools browser
- Tidak ada alat yang sempurna, dan pengujian dengan pengguna nyata adalah satu-satunya cara verifikasi
- Penggunaan accessibility overlay sangat tidak disarankan, karena justru dapat memperburuk masalah
Referensi terkait aksesibilitas
- Collecting dates in an accessible way — Graham Armfield
- What makes an accessible date picker? — Russ Weakley
- Maybe You Don’t Need a Date Picker — Adrian Roselli
- Date Picker Dialog Example — ARIA Authoring Practices Guide
- Designing The Perfect Date And Time Picker — Vitaly Friedman
Jawaban untuk permintaan rekomendasi JavaScript date picker
- Tidak ada solusi universal, semua date picker punya keterbatasan
- Panduan ini bertujuan membantu Anda mengevaluasi kebutuhan sendiri
- Sebisa mungkin, capai tujuan dengan cara yang paling sederhana
- Date picker belum tentu benar-benar diperlukan
Kesimpulan
- Pengujian dengan pengguna nyata dan pengumpulan umpan balik adalah hal yang wajib
- Panduan ini masih terus dikembangkan, dan masukan sangat diterima
Belum ada komentar.