Виклик власного засобу вибору дати з веб-програми на iOS / Android


79

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

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

Це дозволило б нам перестати використовувати бібліотеки JavaScript, такі як jQuery mobile та YUI.

Якщо моє запитання якимось чином незрозуміле, скажіть, будь ласка. Заздалегідь спасибі :-)



Я виявив, що найпростішим способом буде використання, input[type=text]а потім ng-clickвідкриття власного засобу вибору дати за допомогою javascript.
Сіддхарт,

1
@Siddharth Це пристойна пропозиція ... з якихось причин в Android 7 тип введення = дата викликає зовсім інший інструмент вибору, ніж рідний інструмент вибору дати (наприклад, ви не можете прокручувати його пальцем). До речі, як же відкрити "рідний" засіб вибору дат у javascript?
Michael

Відповіді:


105

Оскільки деякі роки деякі пристрої підтримують, <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-11 червня. Однак, при встановленні значення з JavaScript, вона потребує в провідні нулі: 2012-06-01.

  • Коли ви використовуєте такі речі, як Кордова (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 у 2012 році плагін Cordova, здавалося, не відображався правильно, в основному не даючи користувачеві жодної можливості ввести або змінити дату. (Можливо, iOS 4 не робить свій власний засіб вибору дати красиво поверх веб-перегляду, або, можливо, стилі CSS мого веб-перегляду мають певний ефект, і, звичайно, це може відрізнятися на реальному пристрої: будь ласка, коментуйте або редагуйте!)

    • Хоча знову в 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 (симулятор) не приховує клавіатуру, коли це вже видно при торканні до введення дати або при використанні "попереднього" або "наступного" в іншому вводі. Потім одночасно відображається засіб вибору дати під входом і клавіатура внизу, і, здається, дозволяє будь-який ввід з обох. Однак, хоча воно і змінює видиме значення, введення з клавіатури насправді ігнорується. (Відображається при зчитуванні значення або при повторному виклику засобу вибору дати.) Коли клавіатура ще не відображалася, торкання введення дати відображає лише інструмент вибору дати, а не клавіатуру. (Це може відрізнятися на реальному пристрої, будь ласка, коментуйте або редагуйте!)

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


Чи можете ви підтвердити, що плагін насправді запускає власний контроль (порівняно з наданням емуляції JS рідного контролю)?
DA.

Ну, оригінальне питання стосується того, як це робити у самому веб-браузері. Ваша відповідь стосується території PhoneGap, однак, схоже, "добутки" означають, що, можливо, PhoneGap не запускав власний контроль, а скоріше використовував JavaScript для імітації власного контролю. Але, якщо я розумію вашу відповідь, плагін PhoneGap справді запускає вибір дат ОС рідного пристрою поза мобільним сафарі.
DA.

Я все ще трохи збентежений тим, що запускає плагін PhoneGap. Наприклад, ви заявляєте, що iPad має проблеми з рендерингом. Чому це робить рідний контроль неправильно? (Я також піду на свої старіші запитання ...)
DA.

Чому iPad (симулятор) не показує власний інструмент вибору дати, коли його запускає плагін, я не знаю, на жаль. Можливо, щось у коді плагіна Objective C помиляється, або, можливо, якимось чином показ дати у верхній частині веб-перегляду викликає занепокоєння, або, можливо, це стилі CSS веб-сторінки, яку я використовую, якось впливають на це (хоча це не повинно ). Але все стосується рідних збирачів дат; зазирнути в Java , вона досить мала.
Arjan

1
Застереження: на iOS подія `` onchange '' спрацьовує, коли ви змінюєте лише один із 3 елементів керування для дня / місяця / року. Це передчасно, оскільки користувач може змінити більше одного, а потім натиснути "Готово", щоб підтвердити нову дату. Натомість мені довелося використовувати подію 'onblur'.
EoghanM

14

iOS 5 тепер краще підтримує HTML5. у вашому веб-додатку

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

В Android станом на 4.0 не вистачає цього типу підтримки рідного меню.


3
Ваша відповідь така ж, як відповідь Ейріка Хоема. Android 4.0 все ще не підтримує це катастрофа. Ганьба, Google!
hnilsen

На сьогоднішній день Android 4.0.3 на Samsung Galaxy S2 підтримує це, але 4.0.4 на Nexus S ні, @hnilsen.
Arjan

Е, ні: я не кажу, що Android 4.0.3 підтримує це, але: Android 4.0.3 на Galaxy S2 підтримує ...
Arjan

Я використовую це для android в іонному додатку. Це чудово працює, але я роблю це введення як приховане та спрацьовує подію натискання, коли користувач натискає div, тому він не працює. будь-яка ідея?
Джей Шукла,


5

Спробуйте Mobiscroll . Вибір дати та часу стилю прокрутки був спеціально створений для взаємодії на сенсорних пристроях. Це досить гнучко і легко налаштовується. Він поставляється з темами iOS / Android.


2
Хм, це в основному протилежне тому, що я б використав. Це не швидко, непросто в обслуговуванні, і воно не схоже ні на що, крім iOS, Android та Sense за замовчуванням. Дякую за ваш внесок, однак :-)
hnilsen,

Я вважаю, що mobiscroll дуже помилковий і ненадійний у власному браузері HTC Desire. У кращому випадку це здається відсталим, але часто прокрутка прилипає, тому вона просто безперервно прокручує дати.
Лев

Це працює набагато краще на iOS. Однак ... я використовую його на HTC Desire HD, і 2.0 здається вдосконаленим. І, схоже, це працює навіть краще в інших браузерах для Android, таких як Dolphin, наприклад.
Леві Ковач

Майте на увазі, що mobiscroll не підтримує WP7, і цей квиток на помилку працює більше року: code.google.com/p/mobiscroll/issues/…
Parker Ault

Де підтримка Windows Phone? Дивіться допис: blog.mobiscroll.com/where-is-the-windows-phone-support
Леві Ковач

3

Моя відповідь надто спрощена. Якщо ви любите писати простий код, який працює на різних платформах, скористайтеся методом 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">

Приємно. Але див. Також Виявлення екземпляра дати “недійсної дати” в JavaScript . (Ви можете спробувати зробити регулярний вираз трохи кращим, хотіли б не приймати місяці> 12, але максимальний день все одно був би важким.)
Арджан

1

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

Ви можете побачити до та після знімки екрана в цій публікації в блозі: вибір часу та дати


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


-6

На елементах форми використовуйте input type="time". Це позбавить вас усіх клопотів при спробі користуватися бібліотекою вибору даних.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.