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

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

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

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

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

77 голосов | спросил hnilsen 9 FebruaryEurope/MoscowbWed, 09 Feb 2011 18:29:35 +0300000000pmWed, 09 Feb 2011 18:29:35 +030011 2011, 18:29:35

7 ответов


0

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

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

    • Хотя и в 2012 году плагин для выбора даты в Android пытался использовать тот же API-интерфейс JavaScript, что и плагин для 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 (симулятор) не скрывает клавиатуру, когда она уже видна при прикосновении к вводу даты или при использовании «предыдущий» или «следующий» в другом входе. Затем он одновременно отображает средство выбора даты под вводом и клавиатуры в нижней части, а кажется , чтобы разрешить любой ввод из обоих. Однако, хотя это и меняет видимое значение, ввод с клавиатуры фактически игнорируется. (Отображается при чтении значения назад или при повторном вызове средства выбора даты.) Если клавиатура еще не отображалась, при касании ввода даты отображается только средство выбора даты, а не клавиатура. (Это может отличаться на реальном устройстве, пожалуйста, оставьте комментарий или отредактируйте!)

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

ответил Arjan 2 J0000006Europe/Moscow 2012, 00:58:35
0

iOS 5 теперь лучше поддерживает HTML5. в вашем веб-приложении сделайте

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

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

ответил Bot 16 32011vEurope/Moscow11bEurope/MoscowWed, 16 Nov 2011 01:14:00 +0400 2011, 01:14:00
0

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

ответил Eirik Hoem 12 PM00000030000005131 2011, 15:34:51
0

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

ответил Levi Kovacs 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2011 13:43:51 +0400 2011, 13:43:51
0

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

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

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

ответил Amir Nathoo 16 52012vEurope/Moscow11bEurope/MoscowFri, 16 Nov 2012 23:10:33 +0400 2012, 23:10:33
0

В 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');
    };
ответил Mauro 12 PM00000030000002731 2015, 15:32:27

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132