Pemilih Tarikh HTML5

Saya baru-baru ini menyiarkan bahawa saya telah memutuskan untuk menggunakan Opera dalam demonstrasi HTML5 saya untuk RMOUG Training Days 2011. Seperti yang saya nyatakan dalam catatan itu, alasan besar untuk menambahkan penyemak imbas web Opera ke set yang ditunjukkan adalah kerana ia menyokong beberapa ciri HTML5 lebih baik daripada penyemak imbas lain. Catatan ini akan menggambarkan salah satu daripada kes ini: Pemilih Tarikh HTML5.

Salah satu perkara kecil tetapi bagus tentang penggunaan Flex atau perpustakaan JavaScript seperti JQuery adalah adanya mekanisme terbina dalam untuk kawalan input yang mesra pengguna. Khususnya, pemetik tarikh yang baik selalu dihargai.

HTML5 saat ini dijadualkan untuk menawarkan widget pemetik tarikh standard yang dapat digunakan dengan tag HTML. Dalam catatan ini, saya melihat keadaan pemilih tarikh HTML5 dalam versi bukan beta terbaru dari lima penyemak imbas web yang popular (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8, dan Opera 11).

HTML menyokong pelbagai medan input melalui tag input. Jenis jenis input yang berbeza ditentukan melalui atribut inputelemen type. HTML5 secara mendadak meningkatkan jumlah types yang boleh ditentukan. Beberapa nilai-nilai baru bagi typeatribut termasuk orang-orang yang berkaitan dengan tarikh / masa: date, datetime, datetime-local, month, week, dan time. Setiap ini digambarkan dalam coretan kod HTML berikut.

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

Daripada lima pelayar web Saya sebelum ini disenaraikan, Opera menyediakan setakat pelaksanaan canggih sebahagian besar tarikh / masa types daripada inputtag. Bermula dengan positif, beberapa tangkapan skrin pertama menunjukkan bagaimana HTML ringkas ini dihasilkan dalam Opera 11.

Opera 11 Rendering Permulaan Halaman

Atribut "tarikh" Input Tag Opera 11

Atribut "datetime" Tag Input Opera 11

Atribut Opera 11 Input Tag "datetime-local"

Atribut Opera 11 Input Tag "bulan"

Pelaksanaan Opera menyoroti keseluruhan bulan yang akan dipilih.

Atribut Opera 11 Tag Input "minggu"

Opera menyoroti minggu yang akan dipilih.

Atribut "masukan" Tag Input Opera 11

Opera 11 - Semua Medan Input Dipilih

Pelaksanaan Opera bidang input tarikh / masa sangat memberangsangkan. Saya harap perkara yang sama boleh dikatakan untuk penyemak imbas bukan beta yang lain. Malangnya, penyemak imbas lain tidak memberikan sokongan untuk jenis bidang ini di mana sahaja yang hampir elegan ini. Sebenarnya, saya rasa tidak semestinya termasuk semua gambar skrin mereka di sini. Sebagai gantinya, saya hanya menunjukkan gambar skrin masing-masing setelah mengisi semua bidang. Dalam kebanyakan kes, penyemak imbas hanya menganggap bidang ini sebagai medan jenis "teks" sederhana.

Firefox 3.6 Pemilih Tarikh: Mereka Hanya Teks

Pemilih Tarikh Internet Explorer 8: Mereka Hanya Teks

Pemetik Tarikh Safari 5: Mereka Hanya Teks dengan Sorotan Fokus

Pemilih Tarikh Chrome 8: Tidak Cukup Ada

Walaupun tidak semewah dengan rawatan Opera pada bidang tarikh / waktu, penyemak imbas Chrome memperlakukan bidang ini sebagai lebih daripada teks dan menghadkan apa yang boleh dimasukkan ke dalam bidang. Malangnya, tidak ada pilihan timbul tarikh / masa yang bagus seperti yang disediakan oleh Opera. Namun, penyorotan bidang yang difokuskan adalah bagus dan fakta bahawa data yang dipilih agak tarikh / masa seperti dalam format membantu.

Kesimpulannya

Saya menantikan hari di mana penyemak imbas utama secara konsisten menyokong kawalan tarikh / masa yang standard supaya teg "input" HTML ringkas dengan atribut yang sesuai akan menjadikan pemilih tarikh / waktu yang elegan dan bergaya pada penyemak imbas mana pun. Opera 11 kini memimpin pek dan memberikan gambaran terbaik mengenai apa yang mungkin berlaku.

Kisah ini, "HTML5 Date Picker" pada mulanya diterbitkan oleh JavaWorld.