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

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

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

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

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

Некоторые устройства уже несколько лет поддерживают, <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, ошибочно также с помощью плагина Cordova Android приведет показывая выбора даты дважды подряд: раз после нажатия кнопки «набор» в своем первом появлении.

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

  • В iOS 4 при использовании onclickили onfocusдля запуска плагина 2012 iOS сначала показывалась обычная клавиатура, после чего поверх нее помещалось средство выбора даты. Далее, после использования выбора даты, все равно нужно было закрыть обычную клавиатуру. Использование $(this).blur()для удаления фокуса до отображения выбора даты помогло для iOS 4 и не повлияло на другие устройства, которые я тестировал. Но он представил быстрое мигание клавиатуры на iOS, и при первом использовании все могло быть еще более запутанным, поскольку тогда средство выбора даты было медленнее. Можно полностью отключить обычную клавиатуру, сделав ввод, readonlyесли использовался плагин, но это отключило кнопки «предыдущий» и «следующий» при вводе других вводов на том же экране. Также кажется, что плагин 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. в вашем веб-приложении сделайте

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

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

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

Дайте Mobiscroll попробовать. Выбор даты и времени в стиле скроллера был специально создан для взаимодействия на сенсорных устройствах. Он довольно гибкий и легко настраиваемый. Поставляется с темами iOS / Android.

Мой ответ слишком упрощен. Если вам нравится писать простой код, который работает на разных платформах, используйте метод 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">

Вы можете использовать модуль пользовательского интерфейса 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". Это избавит вас от лишних хлопот при попытке использовать библиотеку сборщика данных.