it-swarm.com.de

Rufen Sie die native Datumsauswahl über die Web-App auf iOS / Android auf

Ich versuche, die Möglichkeiten zu erkunden, eine native Web-App mit HTML5 auf verschiedenen Plattformen auszuführen. Derzeit ist ein <input type="date">field öffnet nur die Standard-Softtastatur auf Android und iOS. Ich nehme an, dass die Softtastaturen des mobilen Betriebssystems in Zukunft Datumsauswahl und Ähnliches enthalten werden - genau wie <select> ruft die native Auswahl heute auf.

Da dies weder auf Android oder iOS) noch auf der nativen Benutzeroberfläche implementiert ist, kann eine Web-App die native Datumsauswahl aufrufen, d. H. Wenn Sie darauf klicken?

Dies würde es uns ermöglichen, keine JavaScript-Bibliotheken wie jQuery mobile und YUI mehr zu verwenden.

Wenn meine Frage in irgendeiner Weise unklar ist, sagen Sie es mir bitte. Danke im Voraus :-)

77
hnilsen

Seit einigen Jahren unterstützen einige Geräte <input type="date">, Andere jedoch nicht. Man muss also vorsichtig sein. Hier einige Beobachtungen aus dem Jahr 2012, die heute noch gültig sein könnten:

  • Man kann feststellen, ob type="date" Unterstützt wird, indem man dieses Attribut setzt und dann seinen Wert zurückliest. Browser/Geräte, die dies nicht unterstützen, ignorieren das Setzen des Typs auf date und geben text zurück, wenn sie dieses Attribut zurücklesen. Alternativ kann Modernizr zur Erkennung verwendet werden. Beachten Sie, dass es nicht ausreicht, nach einer Android) - Version zu suchen; wie das Samsung Galaxy S2 auf Android= 4.0.3 unterstützt type="date", Aber Das Google/Samsung Nexus S auf dem neueren Android 4.0.4 tut nicht .

  • Achten Sie beim Voreinstellen des Datums für die native Datumsauswahl darauf, ein vom Gerät erkanntes Format zu verwenden. Wenn Sie dies nicht tun, lehnen die Geräte dies möglicherweise stillschweigend ab und lassen ein leeres Eingabefeld übrig, wenn Sie versuchen, einen vorhandenen Wert anzuzeigen. Wie bei der Verwendung der Datumsauswahl auf einem Galaxy S2, auf dem Android= 4.0.3) ausgeführt wird, wird der <input> - Wert für den 1. Juni möglicherweise auf 2012-6-1 Festgelegt In JavaScript werden führende Nullen benötigt: 2012-06-01.

  • Wenn Sie beispielsweise Cordova (PhoneGap) verwenden, um die native Datumsauswahl auf Geräten anzuzeigen, die type="date" Nicht unterstützen:

    • Stellen Sie sicher, dass die integrierte Unterstützung ordnungsgemäß erkannt wird. Wie im Jahr 2012 auf dem Galaxy S2 läuft Android 4.0.3, fälschlicherweise auch mit dem Cordova Android Plugin würde dazu führen, dass die Datumsauswahl zweimal hintereinander angezeigt wird: noch einmal, nachdem Sie beim ersten Auftreten auf "Setzen" geklickt haben.

    • Wenn sich mehrere Eingaben auf derselben Seite befinden, zeigen einige Geräte "Vorherige" und "Nächste" an, um in ein anderes Formularfeld zu gelangen. Unter iOS 4 löst dies den onclick -Handler nicht aus und gibt dem Benutzer daher eine reguläre Eingabe. Die Verwendung von onfocus zum Auslösen des Plugins schien besser zu funktionieren.

    • Unter iOS 4 wurde mit onclick oder onfocus zum Auslösen des iOS-Plugins 2012 zuerst die reguläre Tastatur angezeigt, woraufhin die Datumsauswahl darüber platziert wurde. Nachdem Sie die Datumsauswahl verwendet haben, muss die normale Tastatur noch geschlossen werden. Die Verwendung von $(this).blur(), um den Fokus zu entfernen, bevor die Datumsauswahl für iOS 4 angezeigt wurde, half und wirkte sich nicht auf andere von mir getestete Geräte aus. Aber es führte unter iOS ein schnelles Flashen der Tastatur ein, und bei der ersten Verwendung könnten die Dinge noch verwirrender sein, da die Datumsauswahl dann langsamer war. Man kann die normale Tastatur vollständig deaktivieren, indem man readonly eingibt, wenn man das Plugin verwendet, aber dadurch werden die Schaltflächen "Zurück" und "Weiter" deaktiviert, wenn andere Eingaben auf demselben Bildschirm eingegeben werden. Es scheint auch, dass das iOS 4-Plugin die native Datumsauswahl nicht auf "Abbrechen" oder "Löschen" gesetzt hat.

    • Auf einem iOS 4-iPad (Simulator) wurde das Cordova-Plug-in 2012 anscheinend nicht richtig gerendert, sodass der Benutzer im Grunde keine Möglichkeit hatte, ein Datum einzugeben oder zu ändern. (iOS 4 rendert seine native Datumsauswahl möglicherweise nicht ordnungsgemäß über einer Webansicht oder das CSS-Styling meiner Webansicht hat eine gewisse Auswirkung, und dies kann auf einem realen Gerät sicherlich anders sein : bitte kommentieren oder editieren!)

    • Auch 2012 versuchte das Android Datumsauswahl-Plugin, dasselbe JavaScript-API wie das iOS-Plugin zu verwenden, und sein Beispiel verwendete allowOldDates, das Android hat dies nicht unterstützt. Außerdem wurde das neue Datum als 2012/7/2 zurückgegeben, während die iOS-Version Mon Jul 02 2012 00:00:00 GMT+0200 (CEST) zurückgab.

  • Selbst wenn <input type="date"> Unterstützt wird, sieht es möglicherweise chaotisch aus:

    • iOS 5 zeigt 2012-06-01 in einem lokalisierten Format wie 1 Jun. 2012 oder June 1, 2012 an (und aktualisiert dies sogar sofort, während die Datumsauswahl noch ausgeführt wird). Auf dem Galaxy S2, auf dem Android 4.0.3) ausgeführt wird, wird jedoch das hässliche 2012-6-1 Oder 2012-06-01 Angezeigt, unabhängig davon, welches Gebietsschema verwendet wird.

    • iOS 5 auf einem iPad (Simulator) blendet die Tastatur nicht aus, wenn dies bereits beim Berühren der Datumseingabe oder bei Verwendung von "Zurück" oder "Weiter" in einer anderen Eingabe sichtbar ist. Es zeigt dann gleichzeitig die Datumsauswahl unter der Eingabe und der Tastatur am unteren Rand, und scheint , um Eingaben von beiden zuzulassen. Obwohl der sichtbare Wert geändert wird, wird die Tastatureingabe ignoriert. (Wird beim Zurücklesen des Werts oder beim erneuten Aufrufen der Datumsauswahl angezeigt.) Wenn die Tastatur noch nicht angezeigt wurde, wird beim Berühren der Datumseingabe nur die Datumsauswahl angezeigt, nicht die Tastatur. (Dies kann bei einem realen Gerät anders sein, bitte kommentieren oder bearbeiten!)

    • Geräte zeigen möglicherweise einen Cursor im Eingabefeld an, und ein langer Druck kann die Optionen der Zwischenablage auslösen und möglicherweise auch die normale Tastatur anzeigen. Beim Klicken wird auf einigen Geräten möglicherweise sogar für den Bruchteil einer Sekunde die normale Tastatur angezeigt, bevor die Datumsauswahl angezeigt wird.

104
Arjan

iOS 5 unterstützt jetzt HTML5 besser. in deiner webapp tun

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

Android ab 4.0 fehlt diese Art der nativen Menüunterstützung.

14
Bot

iOS5 unterstützt dies ( Referenz ). Wenn Sie die native Datumsauswahl aufrufen möchten, haben Sie möglicherweise eine Option mit PhoneGap (haben dies selbst nicht getestet).

5
Eirik Hoem

Gib Mobiscroll einen Versuch. Die Datums- und Uhrzeitauswahl im Scroller-Stil wurde speziell für die Interaktion auf Touch-Geräten entwickelt. Es ist ziemlich flexibel und leicht anpassbar. Es kommt mit iOS/Android-Themen.

5
Levi Kovacs

Meine Antwort ist zu simpel. Wenn Sie einfachen Code schreiben möchten, der plattformübergreifend funktioniert, fragen Sie den Benutzer mit der Methode window.Prompt nach einem Datum. Offensichtlich müssen Sie mit einem regulären Ausdruck validieren und dann das Datumsobjekt erstellen.

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

In deinem HTML:

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

Sie können das Trigger.io's UI Modul verwenden, um die native Android Datums-/Zeitauswahl mit einer regulären HTML5-Eingabe zu verwenden funktioniert nicht als normale mobile Webseite).

In diesem Blogbeitrag sehen Sie Screenshots vor und nach: Datum/Uhrzeit-Auswahl

1
Amir Nathoo

In HTML:

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

In 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
Mauro