Вызов собственного выбора даты из веб-приложения на iOS / Android

Я пытаюсь изучить возможности с использованием собственного веб-приложения на разных платформах с использованием HTML5. В настоящее время поле <input type="date"> открывает стандартную мягкую клавиатуру на Android и iOS. Я полагаю, что в будущем мягкие клавиатуры мобильной ОС будут включать в себя сборщики дат и т. Д., Так как <select> вызывает сегодня собственный выбор.

Так как это не реализовано ни на Android, ни на iOS, но реализовано в пользовательском интерфейсе, возможно ли, чтобы веб-приложение вызывало собственный сборщик дат, то есть при нажатии?

Это позволило бы нам прекратить использование библиотек JavaScript, таких как jQuery mobile и YUI.

Если мой вопрос никоим образом неясен, пожалуйста, скажите мне. Заранее спасибо 🙂

Solutions Collecting From Web of "Вызов собственного выбора даты из веб-приложения на iOS / Android"

С некоторых лет некоторые устройства поддерживают <input type="date"> а другие нет, поэтому нужно быть осторожным. Вот некоторые замечания с 2012 года, которые могут быть актуальны и сегодня:

  • Можно определить, поддерживается ли type="date" , установив этот атрибут и затем вернув его значение. Браузеры / устройства, которые его не поддерживают, будут игнорировать настройку типа на date и вернуть text при чтении этого атрибута. В качестве альтернативы, Modernizr может использоваться для обнаружения. Помните, что недостаточно проверить версию Android; Как Samsung Galaxy S2 на Android 4.0.3 поддерживает type="date" , но Google / Samsung Nexus S на более позднем Android 4.0.4 этого не делает.

  • При настройке даты для собственного выбора даты, обязательно используйте формат, который распознает устройство. Когда вы этого не сделаете, устройства могут молча отклонить его, оставив при пустом поле ввода при попытке показать существующее значение. Как и использование выбора даты на Galaxy S2 под управлением Android 4.0.3, сама может установить <input> на 2012-6-1 для 1 июня. Однако при настройке значения из JavaScript ему нужны ведущие нули: 2012-06-01 .

  • При использовании таких вещей, как Cordova (PhoneGap), чтобы отобразить собственный выбор даты на устройствах, которые не поддерживают type="date" :

    • Обязательно определите встроенную поддержку. Как и в 2012 году на Galaxy S2, работающем под управлением Android 4.0.3, ошибочно также используя плагин Android от Кордовы, вы можете дважды отобразить сборщик данных подряд: еще раз после нажатия «установить» в первом случае.

    • Когда на одной странице несколько входов, некоторые устройства показывают «предыдущий» и «следующий», чтобы попасть в другое поле формы. В iOS 4 это не вызывает обработчик onclick и, следовательно, дает пользователю обычный ввод. Использование onfocus для запуска плагина, казалось, работало лучше.

    • На iOS 4, используя onclick или onfocus чтобы запустить плагин iOS 2012, сначала сделал обычное шоу на клавиатуре, после чего на нем был установлен сборщик дат. Затем, после использования выбора даты, все еще необходимо закрыть обычную клавиатуру. Использование $(this).blur() для удаления фокуса до отображения выбора даты помогло для iOS 4 и не повлияло на другие тестируемые устройства. Но это привело к быстрому миганию клавиатуры на iOS, и все может быть еще более запутанным при первом использовании, так как выбор даты был медленнее. Можно было бы полностью отключить обычную клавиатуру, сделав ввод только для readonly если вы используете плагин, но отключили «предыдущие» и «следующие» кнопки при вводе других входов на одном экране. Похоже, что плагин iOS 4 не сделал «сборку» выбора даты «отменять» или «очистить», но я думаю, что это iOS 4 .

    • На iPad iOS 4 (симулятор), в 2012 году плагин Cordova, похоже, не отображался правильно, в основном не предоставляя пользователю никакой возможности ввести или изменить дату. (Возможно, iOS 4 не делает свой собственный выбор даты красивой поверх веб-представления, или, может быть, мой стиль веб-представления CSS имеет какой-то эффект, и, конечно, это может быть иначе на реальном устройстве: прокомментируйте или отредактируйте!)

    • Хотя в 2012 году плагин для выбора даты в Android попытался использовать тот же JavaScript API, что и iOS-плагин, и его пример использовал allowOldDates , версия Android на самом деле не поддерживала это. Кроме того, он вернул новую дату в 2012/7/2 то время как версия iOS вернулась Mon Jul 02 2012 00:00:00 GMT+0200 (CEST) .

  • Даже когда поддерживается <input type="date"> , все может выглядеть беспорядочно:

    • IOS 5 прекрасно отображает 2012-06-01 в локализованном формате, например, 1 Jun. 2012 или June 1, 2012 (и даже обновления, которые сразу же продолжают работать с выбором даты). Тем не менее, Galaxy S2 под управлением Android 4.0.3 показывает уродливые 2012-6-1 или 2012-06-01 , независимо от того, какой язык используется.

    • IOS 5 на iPad (симулятор) не скрывает клавиатуру, если она уже видна при касании ввода даты или при использовании «предыдущего» или «следующего» на другом входе. Затем он одновременно отображает выбор даты под входом и клавиатурой внизу, и, похоже, позволяет вводить любой из них. Однако, хотя он меняет видимое значение, ввод на клавиатуре фактически игнорируется. (Отображается при чтении значения или при повторном вызове выбора даты.) Когда клавиатура еще не была показана, при касании ввода даты отображается только кнопка выбора даты, а не клавиатура. (Это может быть иначе на реальном устройстве, прокомментируйте или отредактируйте!)

    • Устройства могут отображать курсор в поле ввода, а длинное нажатие может вызвать параметры буфера обмена, возможно, также отображая обычную клавиатуру. При нажатии на некоторых устройствах может отображаться обычная клавиатура в течение секунды секунды, прежде чем переключиться на отображение выбора даты.

IOS 5 теперь поддерживает HTML5 лучше. В вашем webapp do

 <input type="date" name="date" /> 

Android с версии 4.0 не поддерживает этот тип поддержки собственного меню.

Дайте mobiscroll http://mobiscroll.com попробовать. Стиль и время выбора скроллера были специально созданы для взаимодействия на сенсорных устройствах. Он довольно гибкий и легко настраиваемый. Он поставляется с темами iOS / Android.

IOS5 поддерживает эту ( ссылку ). Если вы хотите вызвать собственный подборщик дат, у вас может быть опция с PhoneGap (не проверял это сам).

Мой ответ слишком упрощен. Если вам нравится писать простой код, который работает кросс-платформенный, то используйте метод window.prompt, чтобы спросить пользователя о дате. Очевидно, вам нужно проверить правильность с помощью регулярного выражения, а затем создать объект даты.

 function onInputClick(e){ var r = window.prompt("Give me a date (YYYY-MM-DD)", "2014-01-01"); if(/[\d]{4}-[\d]{1,2}-[\d]{1,2}/.test(r)){ //date ok e.value=r; var split=e.value.split("-"); var date=new Date(parseInt(split[0]),parseInt(split[1])-1,parseInt(split[2])); }else{ alert("Invalid date. Try again."); } } 

В вас HTML:

 <input type="text" onclick="onInputClick(this)" value="2014-01-01"> 

Вы можете использовать UI- модуль Trigger.io для использования встроенного набора даты и времени для Android с обычным вводом HTML5. Для этого требуется использование общей структуры (так что это не будет работать как обычная мобильная веб-страница).

Вы можете видеть до и после скриншотов в этом сообщении в блоге: дата выбора времени

В HTML:

  <form id="my_form"><input id="my_field" type="date" /></form> 

В JavaScript

  // test and transform if needed if($('#my_field').attr('type') === 'text'){ $('#my_field').attr('type', 'text').attr('placeholder','aaaa-mm-dd'); }; // check if($('#my_form')[0].elements[0].value.search(/(19[0-9][0-9]|20[0-1][0-5])[- \-.](0[1-9]|1[012])[- \-.](0[1-9]|[12][0-9]|3[01])$/i) === 0){ $('#my_field').removeClass('bad'); } else { $('#my_field').addClass('bad'); }; 

В ваших элементах формы используется input type="time" . Это избавит вас от хлопот при попытке использовать библиотеку сбора данных.