- Artikel ini ditulis oleh engineer software Chrome, Kent Tamura.
Seperti yang mungkin sudah Anda ketahui, Google Chrome mendukung pemilih tanggal mulai Chrome 20. Cukup dengan menetapkan atribut type dari elemen input ke date, pengguna dapat mengklik tombol panah dan Chrome akan menampilkan widget kalender yang bagus.
Karena kami telah menerima banyak masukan dari developer, kami ingin menjelaskan beberapa hal tentang cara mendapatkan hasil maksimal dari penggunaan pemilih tanggal dalam artikel ini.
Bagaimana pengaruh lokalitas terhadap format tanggal nilai input?
Pengguna dapat mengetik nilai tanggal ke kolom teks input[type=date] dengan format tanggal yang ditampilkan di kotak sebagai teks abu-abu. Format ini diperoleh dari setelan sistem operasi.
Penulis web tidak dapat mengubah format tanggal karena saat ini tidak ada standar untuk menentukan format.
Bagaimana nilai input ditampilkan saat mengirim ke server?
Nilai tanggal yang ditafsirkan dari input[type=date] dalam Permintaan HTTP seperti GET / POST akan diformat sebagai yyyy-mm-dd.
Jenis format apa yang ditampilkan oleh nilai input?
input.value selalu ditampilkan sebagai yyyy-mm-dd, apa pun format presentasinya.
Jenis format apa yang diterima nilai input?
Saat menetapkan input.value secara terprogram, nilai hanya menerima gaya yyyy-mm-dd, terlepas dari format presentasi untuk nilai awal dan nilai yang dimasukkan JavaScript.
Bagaimana cara mengubah tampilan pemilih tanggal?
Saat ini Anda tidak dapat menata gaya tampilan pemilih tanggal. Di WebKit, sebelumnya kami telah menyediakan cara untuk menata gaya kontrol formulir dengan properti CSS -webkit-appearance atau pemilih class pseudo ::-webkit-foo. Namun, pop-up kalender tidak menyediakan cara tersebut di WebKit karena terpisah dari dokumen, seperti menu pop-up untuk <select>, dan saat ini tidak ada standar untuk cara mengontrol gaya pada sub-elemennya.
Bagaimana cara menghindari konflik antara jQuery Datepicker dan pemilih tanggal native?
Jika telah mencoba jQuery Datepicker di input[type=date] di Google Chrome, Anda mungkin melihat kalender yang tumpang-tindih dari jQuery UI dan pop-up kalender native.
Jika Anda ingin menerapkan jQuery Datepicker di semua platform, gunakan input[type=text], bukan input[type=date]. Tidak hanya Google Chrome, tetapi juga iOS Safari, browser BlackBerry, dan Opera memiliki UI mereka sendiri untuk input[type=date], dan saat ini tidak ada cara untuk mendapatkan UI terpadu di semua platform yang menggunakan input[type=date].
Jika ingin menerapkan jQuery Datepicker hanya di platform tanpa dukungan input[type=date], Anda dapat menggunakan Modernizr, atau kode berikut:
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();