- Artikel ini ditulis oleh software engineer Chrome, Kent Tamura.
Seperti yang mungkin sudah Anda perhatikan, Google Chrome mendukung pemilih tanggal sejak Chrome 20. Cukup dengan menyetel atribut type dari elemen input ke date, pengguna dapat mengklik tombol panah dan Chrome akan memunculkan widget kalender yang bagus.
Karena kami telah menerima banyak masukan dari developer, kami ingin mengklarifikasi beberapa hal tentang cara mendapatkan hasil maksimal dari penggunaan pemilih tanggal dalam artikel ini.
Bagaimana lokalitas memengaruhi format tanggal nilai input?
Pengguna dapat mengetik nilai tanggal di 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 memiliki cara untuk mengubah format tanggal karena saat ini tidak ada standar untuk menentukan formatnya.
Bagaimana nilai input dinyatakan 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 oleh nilai input?
Saat menetapkan input.value secara terprogram, nilai hanya menerima gaya yyyy-mm-dd, apa pun 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 di sub-elemennya.
Bagaimana cara menghindari konflik antara pemilih Tanggal jQuery dan pemilih tanggal asli?
Jika telah mencoba jQuery DatePicker pada input[type=date] di Google Chrome, Anda mungkin melihat kalender yang tumpang tindih pada UI jQuery dan popup kalender native.
Jika Anda ingin menerapkan jQuery DatePicker di semua platform, gunakan input[type=text], bukan input[type=date]. Tidak hanya Google Chrome, namun juga iOS Safari, browser BlackBerry, dan Opera memiliki UI sendiri untuk input[type=date], dan saat ini tidak ada cara untuk mencapai UI terpadu di semua platform menggunakan input[type=date].
Jika Anda hanya ingin menerapkan jQuery DatePicker pada 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();