Pemilih Tanggal HTML5

Saya baru-baru ini memposting bahwa saya telah memutuskan untuk menggunakan Opera dalam demonstrasi HTML5 saya untuk RMOUG Training Days 2011. Seperti yang saya nyatakan dalam posting itu, alasan utama untuk menambahkan browser web Opera ke set yang sedang didemonstrasikan adalah karena ia mendukung beberapa fitur HTML5 lebih baik dari browser lainnya. Posting ini akan mengilustrasikan salah satu kasus berikut: Pemilih Tanggal HTML5.

Salah satu hal kecil tapi menyenangkan tentang menggunakan Flex atau pustaka JavaScript seperti JQuery adalah ketersediaan mekanisme bawaan untuk kontrol masukan yang ramah pengguna. Secara khusus, pemilih tanggal yang baik selalu dihargai.

HTML5 saat ini dijadwalkan untuk menawarkan widget pemilih tanggal standar yang dapat digunakan dengan tag HTML. Dalam posting ini, saya melihat keadaan pemilih tanggal HTML5 di versi non-beta terbaru dari lima browser web populer (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8, dan Opera 11).

HTML mendukung berbagai bidang masukan melalui tag masukan. Berbagai jenis bidang masukan ditentukan melalui atribut inputelemen type. HTML5 secara dramatis meningkatkan jumlah yang tersedia typeyang dapat ditentukan. Beberapa dari nilai-nilai baru untuk typeatribut termasuk yang terkait dengan tanggal / waktu: date, datetime, datetime-local, month, week, dan time. Masing-masing diilustrasikan dalam cuplikan kode HTML berikut.

   HTML5 Date Pickers Demonstrated    
    
Input Type Input Field
date
datetime
datetime-local
month
week
time

Dari lima web browser sebelumnya saya terdaftar, Opera menyediakan sejauh implementasi yang paling canggih dari tanggal / waktu types dari inputtag. Dimulai dengan yang positif, beberapa cuplikan layar pertama menunjukkan bagaimana HTML sederhana ini ditampilkan di Opera 11.

Opera 11 Rendering Awal Halaman

Opera 11 Masukkan Tag "tanggal" Atribut

Opera 11 Masukkan Tag "datetime" Atribut

Opera 11 Masukkan Tag Atribut "datetime-local"

Opera 11 Masukkan Tag "bulan" Atribut

Pelaksanaan Opera menyoroti seluruh bulan yang akan dipilih.

Opera 11 Masukkan Tag "minggu" Atribut

Opera menyoroti minggu yang akan dipilih.

Opera 11 Masukkan Tag "waktu" Atribut

Opera 11 - Semua Bidang Input Dipilih

Implementasi Opera di bidang input tanggal / waktu sangat mengesankan. Saya berharap hal yang sama dapat dikatakan untuk browser non-beta lainnya. Sayangnya, browser lain tidak memberikan dukungan untuk jenis bidang ini di mana pun yang mendekati elegan ini. Faktanya, saya rasa tidak ada gunanya memasukkan semua cuplikan layar mereka di sini. Sebagai gantinya, saya hanya menunjukkan snapshot layar dari masing-masing setelah mengisi semua bidang. Dalam kebanyakan kasus, browser hanya memperlakukan kolom ini sebagai kolom jenis "teks" sederhana.

Firefox 3.6 Pemilih Tanggal: Mereka Hanya Teks

Pemilih Tanggal Internet Explorer 8: Mereka Hanya Teks

Safari 5 Date Picker: Mereka Hanya Teks dengan Sorotan Fokus

Pemilih Tanggal Chrome 8: Tidak Cukup Ada

Meskipun tidak seanggun perawatan Opera untuk bidang tanggal / waktu, browser Chrome memperlakukan bidang ini lebih dari teks dan membatasi apa yang dapat dimasukkan ke dalam bidang. Sayangnya, tidak ada popup pilihan tanggal / waktu yang bagus seperti yang disediakan Opera. Namun, penyorotan bidang terfokus itu bagus dan fakta bahwa data yang dipilih agak tanggal / waktu seperti dalam format membantu.

Kesimpulan

Saya menantikan hari ketika browser utama secara konsisten mendukung kontrol tanggal / waktu standar sehingga tag "masukan" HTML sederhana dengan atribut yang sesuai akan menampilkan pemilih tanggal / waktu yang elegan dan bergaya di browser mana pun. Opera 11 saat ini memimpin paket dan memberikan ilustrasi terbaik tentang apa yang bisa dilakukan.

Artikel ini, "Pemetik Tanggal HTML5", awalnya diterbitkan oleh JavaWorld.