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

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

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

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

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

ОТВЕТЫ

Ответ 1

С некоторых лет некоторые устройства поддерживают <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 вещь.

    • На iOS 4 iPad (симулятор), в 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 (симулятор) не скрывает клавиатуру, если она уже видна при касании ввода даты или при использовании "предыдущего" или "следующего" на другом входе. Затем он одновременно отображает блок выбора даты ниже ввода и клавиатуру внизу, и, похоже, позволяет любой вход от обоих. Однако, хотя он меняет видимое значение, ввод на клавиатуре фактически игнорируется. (Отображается при чтении значения или при повторном вызове выбора даты.) Когда клавиатура еще не была показана, при касании ввода даты отображается только переключатель даты, а не клавиатура. (Это может быть иначе на реальном устройстве, пожалуйста, прокомментируйте или отредактируйте!)

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

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

В 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');
    };

Ответ 8

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