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

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

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". Це позбавить вас усіх клопотів при спробі користуватися бібліотекою вибору даних.