Избор на дата на HTML5

Наскоро публикувах, че бях решил да използвам Opera в моите HTML5 демонстрации за RMOUG Training Days 2011. Както заявих в тази публикация, голяма причина за добавяне на уеб браузъра Opera към демонстрирания комплект е, че той поддържа някои от HTML5 функциите по-добре от другите браузъри. Тази публикация ще илюстрира един от тези случаи: инструментите за избор на дата HTML5.

Едно от малките, но приятни неща при използването на Flex или JavaScript библиотека като JQuery е наличието на вградени механизми за удобни за потребителя контроли за въвеждане. По-специално винаги се оценява добрият избор на дати.

Понастоящем HTML5 предлага да предложи стандартна джаджа за избор на дата, която може да се използва с HTML тагове. В тази публикация разглеждам състоянието на инструментите за избор на дата в HTML5 в последните не-бета версии на пет популярни уеб браузъра (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 и Opera 11).

HTML поддържа различни полета за въвеждане чрез входния таг. Различните видове полета за въвеждане се посочват чрез атрибута на inputелемента type. HTML5 драстично увеличава броя на наличните types, които могат да бъдат посочени. Няколко от новите стойности за typeатрибута включват тези, свързани с дата / час: date, datetime, datetime-local, month, week, и time. Всеки от тях е илюстриран в следващия фрагмент на HTML код.

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

От петте уеб браузъра, които изброих по-рано, Opera предоставя най-сложното изпълнение на датата / часа typeна inputмаркера. Започвайки с положителното, първите няколко екранни снимки показват как този прост HTML се изобразява в Opera 11.

Opera 11 Първоначално изобразяване на страница

Атрибут „дата“ на опера 11 за въвеждане на етикет

Входен етикет на Opera 11 "datetime" Атрибут

Входен етикет на Opera 11 „datetime-local“ атрибут

Атрибут „месец“ на Opera 11 Входен етикет

Изпълнението на Opera подчертава целия месец, който ще бъде избран.

Атрибут „Седмица“ на оперативния етикет на Opera 11

Opera подчертава седмицата, която ще бъде избрана.

Атрибут "време" на входния етикет на Opera 11

Opera 11 - Избрани са всички полета за въвеждане

Внедряването на полетата за въвеждане на дата / час от Opera е впечатляващо. Иска ми се същото да се каже и за останалите не-бета браузъри. За съжаление, другите браузъри не предоставят поддръжка за тези типове полета близо до този елегантен. Всъщност не мисля, че дори си струва да включвате всичките си екранни снимки тук. Вместо това просто показвам екранна снимка на всеки след попълване на всички полета. В повечето случаи браузърите просто третират тези полета като прости полета от тип „текст“.

Firefox 3.6 Избор на дата: Те са просто текст

Избор на дата на Internet Explorer 8: Те са просто текст

Избор на дата на Safari 5: Те са просто текст с подчертаване на фокуса

Избор на дата на Chrome 8: Не съвсем там

Макар и не толкова елегантно, колкото третирането на Opera с полета за дата / час, браузърът Chrome третира тези полета като повече от текст и ограничава това, което може да се въведе в полетата. За съжаление няма хубави изскачащи прозорци за избор на дата / час, каквито Opera осигурява. И все пак, подчертаването на фокусираното поле е приятно и фактът, че избраните данни са донякъде дата / час като във формат, помага.

Заключение

Очаквам с нетърпение деня, в който основните браузъри последователно поддържат стандартизирани контроли за дата / час, така че простите HTML "входни" тагове със съответните атрибути да правят елегантни и стилистични селектори за дата / час във всеки браузър. Понастоящем Opera 11 води пакета и предоставя най-добрата илюстрация на това, което може да бъде.

Тази история „HTML5 Date Picker“ първоначално е публикувана от JavaWorld.