Wywołaj natywny selektor dat z aplikacji internetowej na iOS / Android

Próbuję zbadać możliwości uruchamiania natywnej aplikacji internetowej na różnych platformach przy użyciu HTML5. Obecnie <input type="date">pole po prostu otwiera standardową klawiaturę programową w systemie Android i iOS. Przypuszczam, że w przyszłości klawiatury programowe mobilnego systemu operacyjnego będą zawierały narzędzia <select>do wybierania dat i tym podobne - tak jak dziś wywołuje natywny wybór.

Ponieważ nie jest to zaimplementowane w systemie Android ani iOS, ale jest zaimplementowane w natywnym interfejsie użytkownika, czy aplikacja internetowa może wywołać natywny selektor dat, tj. Po kliknięciu?

Umożliwiłoby to nam zaprzestanie korzystania z bibliotek JavaScript, takich jak jQuery mobile i YUI.

Jeśli moje pytanie jest niejasne, proszę, powiedz mi. Z góry dziękuję :-)

Od kilku lat niektóre urządzenia obsługują, <input type="date">a inne nie, więc trzeba być ostrożnym. Oto kilka obserwacji z 2012 roku, które nadal mogą być aktualne:

• Można wykryć, czy type="date"jest obsługiwany, ustawiając ten atrybut, a następnie odczytując jego wartość. Przeglądarki / urządzenia, które go nie obsługują, zignorują ustawienie typu na datei zwrócą textpodczas odczytu tego atrybutu. Alternatywnie do wykrywania można użyć Modernizr . Uważaj, nie wystarczy sprawdzić, czy jest jakaś wersja Androida; jak Samsung Galaxy S2 na Androidzie 4.0.3 obsługuje type="date", ale Google / Samsung Nexus S na nowszą Androida 4.0.4 robi nie .

• Ustawiając datę dla natywnego selektora dat, upewnij się, że używasz formatu rozpoznawanego przez urządzenie. Gdy tego nie robią, urządzenia mogą po cichu je odrzucić, pozostawiając puste pole wejściowe podczas próby wyświetlenia istniejącej wartości. Jak za pomocą selektora dat na Galaxy S2 z Androidem 4.0.3 potęgę sam ustawić <input>aby 2012-6-1na 1 czerwca. Jednak, gdy ustawienie wartości z JavaScript, potrzebuje zer: 2012-06-01.

• Podczas używania rzeczy takich jak Cordova (PhoneGap) do wyświetlania natywnego selektora dat na urządzeniach, które nie obsługują type="date":

  • Pamiętaj, aby prawidłowo wykryć wbudowaną obsługę. Podobnie jak w 2012 roku na Galaxy S2 z systemem Android 4.0.3, błędnie również użycie wtyczki Cordova dla Androida skutkowałoby wyświetleniem selektora dat dwa razy z rzędu: po raz kolejny po kliknięciu „ustaw” w pierwszym wystąpieniu.

  • Gdy na tej samej stronie znajduje się wiele danych wejściowych, niektóre urządzenia wyświetlają „poprzednie” i „następne”, aby przejść do innego pola formularza. W systemie iOS 4 nie wyzwala to programu onclickobsługi, a zatem zapewnia użytkownikowi regularne dane wejściowe. Używanie onfocusdo uruchamiania wtyczki wydawało się działać lepiej.

  • W systemie iOS 4 użycie onclicklub onfocusdo wyzwolenia wtyczki iOS 2012 najpierw powodowało zwykłe wyświetlanie klawiatury, po czym selektor dat został umieszczony na górze. Następnie, po użyciu selektora dat, nadal trzeba było zamknąć zwykłą klawiaturę. Użycie $(this).blur()do usunięcia fokusu przed pokazaniem selektora dat było pomocne w iOS 4 i nie miało wpływu na inne testowane urządzenia. Ale wprowadził szybkie flashowanie klawiatury na iOS, a przy pierwszym użyciu rzeczy mogą być jeszcze bardziej zagmatwane, ponieważ wtedy selektor daty był wolniejszy. Można by całkowicie wyłączyć zwykłą klawiaturę, wprowadzając dane wejściowe, readonlygdyby korzystano z wtyczki, ale to wyłączało przyciski „poprzedni” i „następny” podczas wpisywania innych wejść na tym samym ekranie. Wygląda również na to, że wtyczka iOS 4 nie powodowała, że ​​natywny selektor dat pokazywał „anuluj”

  • Na iPadzie z systemem iOS 4 (symulator) w 2012 r. Wtyczka Cordova nie wydawała się poprawnie renderować, w zasadzie nie dając użytkownikowi żadnej możliwości wprowadzenia lub zmiany daty. (Może iOS 4 nie renderuje dobrze swojego natywnego selektora dat w widoku sieciowym, a może styl CSS mojego widoku internetowego ma jakiś wpływ i na pewno może to wyglądać inaczej na prawdziwym urządzeniu: proszę komentuj lub edytuj!)

  • Chociaż ponownie w 2012 r. Wtyczka do wybierania dat dla Androida próbowała używać tego samego interfejsu API JavaScript, co wtyczka iOS i jej przykład allowOldDates, wersja na Androida w rzeczywistości tego nie obsługiwała. Ponadto zwrócił nową datę, 2012/7/2gdy wróciła wersja na iOS Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

• Nawet jeśli <input type="date">jest obsługiwany, rzeczy mogą wyglądać niechlujnie:

  • iOS 5 ładnie wyświetla się 2012-06-01w zlokalizowanym formacie, takim jak 1 Jun. 2012lub June 1, 2012(a nawet aktualizuje, że natychmiast, podczas gdy nadal działa selektor dat). Jednak Galaxy S2 z systemem Android 4.0.3 pokazuje brzydkie 2012-6-1lub 2012-06-01, bez względu na używane ustawienie regionalne.

  • iOS 5 na iPadzie (symulatorze) nie ukrywa klawiatury, gdy jest ona już widoczna po dotknięciu daty lub podczas używania „poprzedni” lub „następny” w innym wejściu. Następnie jednocześnie pokazuje selektor dat pod wejściem i klawiaturą na dole i wydaje się zezwalać na dowolne wejście z obu. Jednak mimo że zmienia widoczną wartość, dane wprowadzane z klawiatury są w rzeczywistości ignorowane. (Wyświetlane podczas odczytywania wartości lub przy ponownym wywołaniu selektora dat). Gdy klawiatura nie była jeszcze wyświetlana, dotknięcie pola wprowadzania daty powoduje wyświetlenie tylko selektora dat, a nie klawiatury. (Może to wyglądać inaczej na prawdziwym urządzeniu, prosimy o komentarz lub edycję!)

  • Urządzenia mogą wyświetlać kursor w polu wprowadzania, a długie naciśnięcie może wywołać opcje schowka, prawdopodobnie pokazując również zwykłą klawiaturę. Po kliknięciu niektóre urządzenia mogą nawet wyświetlać zwykłą klawiaturę przez ułamek sekundy, zanim zmienisz się w celu wyświetlenia selektora dat.

iOS 5 obsługuje teraz lepiej HTML5. w swojej aplikacji internetowej

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

Android od wersji 4.0 nie ma tego typu natywnej obsługi menu.

iOS5 obsługuje to ( odniesienie ). Jeśli chcesz wywołać natywny selektor dat, możesz mieć opcję z PhoneGap (sam tego nie testowałem).

Wypróbuj Mobiscroll . Selektor daty i czasu w stylu scrollera został stworzony specjalnie do interakcji na urządzeniach dotykowych. Jest dość elastyczny i łatwo konfigurowalny. Zawiera motywy iOS / Android.

Moja odpowiedź jest zbyt uproszczona. Jeśli lubisz pisać prosty kod działający na wielu platformach, użyj metody window.prompt , aby zapytać użytkownika o datę. Oczywiście musisz sprawdzić poprawność za pomocą wyrażenia regularnego, a następnie utworzyć obiekt daty.

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.");
}
}

W tobie HTML:

<input type="text" onclick="onInputClick(this)" value="2014-01-01">

Możesz użyć modułu UI Trigger.io, aby użyć natywnego selektora daty / czasu Androida ze zwykłym wejściem HTML5. Jednak wymaga to użycia ogólnej struktury (więc nie będzie działać jak zwykła mobilna strona internetowa).

Możesz zobaczyć zrzuty ekranu przed i po w tym poście na blogu: selektor daty i godziny

W HTML:

  <form id="my_form"><input id="my_field" type="date" /></form>

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

W elementach formularza użyj input type="time". Zaoszczędzi ci to kłopotów związanych z używaniem biblioteki selektora danych.