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

Ich versuche, die Möglichkeiten zu erkunden, indem ich eine native Web-App auf verschiedenen Plattformen mit HTML5 ausführe. Derzeit <input type="date">öffnet ein Feld nur die Standard-Softtastatur für Android und iOS. Ich nehme an, dass die Softtastaturen des mobilen Betriebssystems in Zukunft Datumsauswahl und dergleichen enthalten werden - genau wie <select>die native Auswahl heute aufgerufen wird.

Da dies weder auf Android noch auf iOS implementiert ist, sondern auf der nativen Benutzeroberfläche, kann eine Web-App die native Datumsauswahl aufrufen, dh wenn Sie darauf klicken?

Dies würde es uns ermöglichen, die Verwendung von JavaScript-Bibliotheken wie jQuery Mobile und YUI einzustellen.

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

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

• Sie können feststellen, ob dies type="date"unterstützt wird, indem Sie dieses Attribut festlegen und dann seinen Wert zurücklesen. Browser / Geräte, die dies nicht unterstützen, ignorieren das Setzen des Typs auf dateund kehren textbeim Zurücklesen dieses Attributs zurück. 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 nicht .

• Stellen Sie beim Voreinstellen des Datums für die native Datumsauswahl sicher, dass Sie ein Format verwenden, das das Gerät erkennt. Wenn Sie dies nicht tun, lehnen Geräte es 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 mit Android 4.0.3 könnte sich das <input>auf 2012-6-1den 1. Juni einstellen . Beim Festlegen des Werts aus JavaScript werden jedoch führende Nullen benötigt : 2012-06-01.

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

  • Stellen Sie sicher, dass die integrierte Unterstützung ordnungsgemäß erkannt wird. Wie im Jahr 2012 auf dem Galaxy S2 mit Android 4.0.3, fälschlicherweise auch die Cordova Android - Plugin in welcher die Datumsauswahl zweimal in Folge führen würde: noch einmal nach „set“ in seinem ersten Auftreten klicken.

  • Wenn sich mehrere Eingaben auf derselben Seite befinden, zeigen einige Geräte "Zurück" und "Weiter" an, um in ein anderes Formularfeld zu gelangen. Unter iOS 4 löst dies den onclickHandler nicht aus und gibt dem Benutzer daher eine regelmäßige Eingabe. Die Verwendung onfocuszum Auslösen des Plugins schien besser zu funktionieren.

  • Unter iOS 4 wurde bei Verwendung von onclickoder onfocuszum Auslösen des 2012 iOS-Plugins zuerst die reguläre Tastatur angezeigt. Danach wurde die Datumsauswahl darüber gelegt. Nachdem Sie die Datumsauswahl verwendet hatten, musste die normale Tastatur noch geschlossen werden. Das $(this).blur()Entfernen des Fokus vor dem Anzeigen der Datumsauswahl half iOS 4 und wirkte sich nicht auf andere von mir getestete Geräte aus. Unter iOS wurde jedoch ein schnelles Blinken der Tastatur eingeführt, und bei der ersten Verwendung könnten die Dinge noch verwirrender sein, da die Datumsauswahl dann langsamer war. Man könnte die normale Tastatur vollständig deaktivieren, indem man die Eingabe readonlyvornimmt, wenn man das Plugin verwendet, aber das deaktiviert die Schaltflächen "Zurück" und "Weiter", wenn andere Eingaben auf demselben Bildschirm eingegeben werden. Es scheint auch, dass das iOS 4-Plugin die native Datumsauswahl nicht dazu gebracht hat, "Abbrechen" anzuzeigen.

  • Auf einem iOS 4 iPad (Simulator) schien das Cordova-Plugin 2012 nicht richtig zu rendern, sodass der Benutzer im Grunde keine Möglichkeit hatte, ein Datum einzugeben oder zu ändern. (Vielleicht rendert iOS 4 seine native Datumsauswahl nicht gut über einer Webansicht, oder vielleicht hat das CSS-Styling meiner Webansicht einen gewissen Effekt, und dies kann auf einem realen Gerät sicherlich anders sein: Bitte kommentieren oder bearbeiten!)

  • Auch 2012 versuchte das Android-Plugin für die Datumsauswahl, dieselbe JavaScript-API wie das iOS-Plugin zu verwenden, und das verwendete Beispiel allowOldDatesunterstützte die Android-Version tatsächlich nicht. Außerdem wurde das neue Datum zurückgegeben, 2012/7/2während die iOS-Version zurückgegeben wurde Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

• Selbst wenn dies <input type="date">unterstützt wird, sehen die Dinge möglicherweise chaotisch aus:

  • iOS 5 wird 2012-06-01in einem lokalisierten Format wie 1 Jun. 2012oder angezeigt June 1, 2012(und aktualisiert es sogar sofort, während die Datumsauswahl noch ausgeführt wird). Das Galaxy S2 mit Android 4.0.3 zeigt jedoch das hässliche 2012-6-1oder 2012-06-01, egal welches Gebietsschema verwendet wird.

  • iOS 5 auf einem iPad (Simulator) verbirgt die Tastatur nicht, 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 die Tastatur unten an und scheint jede Eingabe von beiden zuzulassen. Obwohl der sichtbare Wert geändert wird, wird die Tastatureingabe tatsächlich 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 auf einem realen Gerät anders sein, bitte kommentieren oder bearbeiten!)

  • Geräte zeigen möglicherweise einen Cursor im Eingabefeld an, und ein langes Drücken löst möglicherweise die Optionen für die Zwischenablage aus, möglicherweise auch die normale Tastatur. 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.

iOS 5 unterstützt jetzt HTML5 besser. in Ihrer Webapp tun

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

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

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

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

Meine Antwort ist zu simpel. Wenn Sie einfachen Code schreiben möchten , der plattformübergreifend funktioniert, verwenden Sie die window.prompt- Methode, um den Benutzer nach einem Datum zu fragen. Natürlich 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 Ihrem HTML:

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

Sie können die Benutzeroberfläche von Trigger.io verwenden Modul von , um die native Android-Datums- / Zeitauswahl mit einer regulären HTML5-Eingabe zu verwenden. Um dies zu erreichen, muss jedoch das gesamte Framework verwendet werden (funktioniert also nicht als normale mobile Webseite).

Sie können vor und nach Screenshots in diesem Blog-Beitrag sehen: Datums- und Uhrzeitauswahl

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

Verwenden Sie auf Ihrem Formular Elemente input type="time". Dies erspart Ihnen den Aufwand, eine Datenauswahlbibliothek zu verwenden.