Вызовите native date picker из веб-приложения на iOS / Android

Question

Вызовите native date picker из веб-приложения на iOS / Android

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

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

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

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

8 76

javascript android ios html5 iphone

8 ответов:

iOS 5 теперь поддерживает HTML5 лучше. в вашем веб-приложении do
<input type="date" name="date" />
Android от 4.0 не хватает этого типа поддержки родного меню.

14

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

5

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

5

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

3

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

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

1

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

0

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

-6

Arjan · Accepted Answer · 2015-07-28 16:05:11

после нескольких лет некоторые устройства поддерживают <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 года сначала было сделано обычное шоу клавиатуры, после чего выбор даты был помещен поверх этого. Затем, после использования выбора даты, все еще нужно было закрыть обычную клавиатуру. Используя $(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 (симулятор) не скрывает клавиатуру, когда она уже видна при касании ввода даты или при использовании "предыдущего" или "следующего" в другом входе. Затем он одновременно показывает выбор даты под входом и клавиатура внизу, и кажется разрешить любой вход от обоих. Однако, хотя это действительно меняет видимое значение, ввод с клавиатуры фактически игнорируется. (Отображается при считывании значения или при повторном вызове средства выбора даты.) Если клавиатура еще не была показана, то при касании ввода даты отображается только средство выбора даты, а не клавиатура. (это может быть по-другому на реальном устройстве, пожалуйста, прокомментируйте или отредактируйте!)

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