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


Ich versuche die Möglichkeiten zu erforschen, indem ich eine native Web-App auf verschiedenen Plattformen mit HTML5 starte. Derzeit, ein <input type="date">Feld öffnet nur die Standard-Soft-Tastatur auf Android und iOS. Ich nehme an, dass die Soft-Tastaturen des mobilen Betriebssystems in Zukunft Datums-Picker und dergleichen enthalten werden <select> ruft das native select heute auf.

Da dies nicht auf Android oder iOS implementiert ist, aber in der nativen Benutzeroberfläche implementiert ist, ist es möglich, dass eine Webanwendung die native Datumsauswahl aufruft, d.

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

Wenn meine Frage irgendwie unklar ist, bitte sag es mir. Vielen Dank im Voraus :-)


76
2018-02-09 15:29


Ursprung


Antworten:


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

  • Man kann erkennen, ob type="date" wird unterstützt, indem dieses Attribut gesetzt und dann sein Wert zurückgelesen wird. Browser / Geräte, die dies nicht unterstützen, ignorieren die Einstellung des Typs date und zurück text wenn Sie dieses Attribut zurücklesen. Alternative, Modernizr kann zur Erkennung verwendet werden. Vorsicht, es reicht nicht, 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 es nicht.

  • Achten Sie bei der Voreinstellung des Datums für die native Datumsauswahl darauf, ein Format zu verwenden, das das Gerät erkennt. Wenn dies nicht geschieht, können Geräte es stillschweigend ablehnen, wobei ein leeres Eingabefeld bei dem Versuch verbleibt, einen vorhandenen Wert anzuzeigen. Wie die Verwendung des Date Picker auf einem Galaxy S2 mit Android 4.0.3 könnte sich das einstellen <input> zu 2012-6-1 für den 1. Juni. Wenn Sie den Wert jedoch aus JavaScript auswählen, sind führende Nullen erforderlich: 2012-06-01.

  • Wenn Sie Dinge wie Cordova (PhoneGap) verwenden, um die native Datumsauswahl auf Geräten anzuzeigen, die dies 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, irrtümlicherweise ebenfalls Die Verwendung des Cordova Android-Plugins würde dazu führen, dass die Datumsauswahl zweimal hintereinander angezeigt wird: noch einmal nach dem Klicken auf "set" beim ersten Auftreten.

    • Wenn mehrere Eingänge auf derselben Seite vorhanden sind, zeigen einige Geräte "vorherige" und "nächste" an, um in ein anderes Formularfeld zu gelangen. Auf iOS 4 löst dies nicht die onclick Handler und gibt daher dem Benutzer eine regelmäßige Eingabe. Verwenden onfocus das Plugin zu starten schien besser zu funktionieren.

    • Auf iOS 4 mit onclick oder onfocus Um das iOS-Plugin 2012 zu starten, wurde zunächst die normale Tastatur-Anzeige erstellt, woraufhin der Datums-Picker darüber gelegt wurde. Als nächstes musste nach der Verwendung der Datumsauswahl die normale Tastatur geschlossen werden. Verwenden $(this).blur() den Fokus zu entfernen, bevor die Datumsauswahl angezeigt wurde, half für iOS 4 und hatte keinen Einfluss auf andere Geräte, die ich getestet habe. Aber es brachte ein kurzes Aufblitzen der Tastatur auf iOS mit sich, und die Dinge könnten bei der ersten Verwendung noch verwirrender sein, als dann die Datumsauswahl langsamer war. Man könnte die normale Tastatur vollständig deaktivieren, indem man die Eingabe vornimmt readonlywenn man das Plugin benutzt, aber die "vorherigen" und "nächsten" Tasten deaktiviert, wenn man andere Eingaben auf dem gleichen Bildschirm eingibt. Es scheint auch das iOS 4-Plugin nicht die native Datumsauswahl zeigen "Abbrechen" oder "löschen", aber Ich denke das ist eine iOS 4 Sache.

    • Auf einem iOS 4 iPad (Simulator) schien das Cordova-Plugin 2012 nicht korrekt zu rendern und gab dem Benutzer keine Möglichkeit, ein Datum einzugeben oder zu ändern. (Vielleicht gibt iOS 4 seine native Datumsauswahl nicht gut über einer Webansicht aus, oder vielleicht hat der CSS-Stil meiner Webansicht eine Wirkung, und das könnte auf einem echten Gerät sicherlich anders sein: Bitte kommentieren oder bearbeiten!)

    • Obwohl das Android-Plug-in für Datumsauswahl im Jahr 2012 erneut versucht hat, die gleiche JavaScript-API wie das iOS-Plug-in zu verwenden, wird dieses Beispiel verwendet allowOldDatesdas hat die Android-Version eigentlich nicht unterstützt. Außerdem gab es das neue Datum als zurück 2012/7/2 während die iOS-Version zurückgegeben wurde Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

  • Sogar wenn <input type="date"> unterstützt wird, könnten die Dinge chaotisch aussehen:

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

    • iOS 5 auf einem iPad (Simulator) versteckt die Tastatur nicht, wenn diese bereits beim Berühren der Datumseingabe oder bei Verwendung von "vorheriger" oder "nächster" in einer anderen Eingabe sichtbar ist. Es zeigt dann gleichzeitig die Datumsauswahl unter der Eingabe an und die Tastatur an der Unterseite und scheint jede Eingabe von beiden zulassen. Obwohl der sichtbare Wert geändert wird, wird die Tastatureingabe jedoch ignoriert. (Wird beim Zurücklesen des Werts oder beim erneuten Aufruf der Datumsauswahl angezeigt.) Wenn die Tastatur noch nicht angezeigt wurde, wird beim Berühren der Datumseingabe nur die Datumsauswahl und nicht die Tastatur angezeigt. (Dies könnte bei einem echten Gerät anders sein, bitte kommentieren oder bearbeiten!)

    • Geräte zeigen möglicherweise einen Cursor im Eingabefeld an und ein langer Druck kann die Zwischenablage-Optionen auslösen, möglicherweise auch die normale Tastatur. Wenn Sie klicken, wird auf einigen Geräten für einen Bruchteil einer Sekunde sogar die normale Tastatur angezeigt, bevor Sie zum Anzeigen der Datumauswahl wechseln.


104
2018-06-01 20:58



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
2017-11-15 21:14



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


5
2017-08-12 11:34



Geben Mobiscroll ein 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
2017-09-07 09:43



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

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

3
2017-07-19 00:25



Du könntest benutzen Die Benutzeroberfläche von Trigger.io Modul zur Verwendung der nativen Android Datum / Uhrzeit-Auswahl mit einer regulären HTML5-Eingabe. Dies erfordert jedoch die Verwendung des gesamten Frameworks (also nicht als normale mobile Webseite funktionieren).

Sie können vor und nach Screenshots in diesem Blogbeitrag sehen: Datum Zeit Picker


1
2017-11-16 19:10



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
2017-08-12 12:32