Pertanyaan Aktifkan pemilih tanggal asli dari aplikasi web di iOS / Android


Saya mencoba menjelajahi kemungkinan dengan menjalankan aplikasi web asli di berbagai platform menggunakan HTML5. Saat ini, sebuah <input type="date">bidang hanya membuka keyboard lunak standar di Android dan iOS. Saya kira di masa depan keyboard lunak OS ponsel akan menyertakan pemilih tanggal dan semacamnya <select> panggil orang asli pilih hari ini.

Karena ini tidak diterapkan di Android atau iOS, tetapi diterapkan di UI asli, apakah mungkin bagi aplikasi web untuk menjalankan pemilih tanggal asli, yaitu ketika diklik?

Ini akan memungkinkan bagi kita untuk berhenti menggunakan pustaka JavaScript seperti jQuery mobile dan YUI.

Jika pertanyaan saya tidak jelas, tolong beri tahu saya. Terima kasih sebelumnya :-)


76
2018-02-09 15:29


asal


Jawaban:


Sejak beberapa tahun beberapa perangkat mendukung <input type="date"> tetapi yang lain tidak, jadi orang perlu berhati-hati. Berikut beberapa pengamatan dari 2012, yang mungkin masih berlaku hari ini:

  • Seseorang dapat mendeteksi jika type="date" didukung oleh pengaturan atribut itu dan kemudian membaca kembali nilainya. Browser / perangkat yang tidak mendukungnya akan mengabaikan pengaturan jenisnya date dan kembali text saat membaca kembali atribut itu. Kalau tidak, Modernizr dapat digunakan untuk deteksi. Berhati-hatilah bahwa itu tidak cukup untuk memeriksa beberapa versi Android; seperti Samsung Galaxy S2 di Android 4.0.3 tidak mendukung type="date", tetapi Google / Samsung Nexus S pada Android 4.0.4 yang lebih baru tidak.

  • Saat mengatur tanggal untuk pemilih tanggal asli, pastikan untuk menggunakan format yang diakui perangkat. Ketika tidak melakukan itu, perangkat mungkin diam-diam menolaknya, meninggalkan satu dengan bidang input kosong ketika mencoba untuk menunjukkan nilai yang ada. Seperti menggunakan pemilih tanggal pada Galaxy S2 yang menjalankan Android 4.0.3 mungkin sendiri mengatur <input> untuk 2012-6-1 untuk 1 Juni. Namun, saat menyetel nilai dari JavaScript, perlu nol di depan: 2012-06-01.

  • Saat menggunakan hal-hal seperti Cordova (PhoneGap) untuk menampilkan pemilih tanggal asli pada perangkat yang tidak mendukung type="date":

    • Pastikan untuk mendeteksi dukungan bawaan dengan benar. Seperti pada 2012 di Galaxy S2 menjalankan Android 4.0.3, keliru juga menggunakan plugin Cordova Android akan menghasilkan pemetik tanggal dua kali berturut-turut: sekali lagi setelah mengklik "set" dalam kemunculannya yang pertama.

    • Ketika ada beberapa masukan di halaman yang sama, beberapa perangkat menampilkan "sebelumnya" dan "berikutnya" untuk masuk ke bidang formulir lain. Pada iOS 4, ini tidak memicu onclick handler dan karenanya memberikan input reguler kepada pengguna. Menggunakan onfocus untuk memicu plugin tampaknya bekerja lebih baik.

    • Di iOS 4, menggunakan onclick atau onfocus untuk memicu plugin iOS 2012 pertama kali membuat acara keyboard biasa, setelah itu pemilih tanggal ditempatkan di atas itu. Selanjutnya, setelah menggunakan pemilih tanggal, seseorang masih perlu menutup keyboard biasa. Menggunakan $(this).blur() untuk menghapus fokus sebelum pemilih tanggal ditampilkan membantu untuk iOS 4 dan tidak memengaruhi perangkat lain yang saya uji. Tapi itu memperkenalkan beberapa flashing cepat dari keyboard di iOS, dan hal-hal bisa menjadi lebih membingungkan pada penggunaan pertama karena kemudian pemilih tanggal lebih lambat. Satu dapat sepenuhnya menonaktifkan keyboard biasa dengan membuat input readonlyjika seseorang menggunakan plugin, tetapi itu menonaktifkan tombol "sebelumnya" dan "selanjutnya" saat mengetik input lain di layar yang sama. Sepertinya juga plugin iOS 4 tidak membuat penampil tanggal asli menunjukkan "batal" atau "hapus", tetapi Saya rasa itu adalah hal iOS 4.

    • Pada iPad 4 iOS (simulator), pada tahun 2012 plugin Cordova tampaknya tidak dirender dengan benar, pada dasarnya tidak memberi pengguna opsi apa pun untuk memasukkan atau mengubah tanggal. (Mungkin iOS 4 tidak membuat pemilih tanggal aslinya dengan baik di atas tampilan web, atau mungkin styling CSS tampilan web saya memiliki beberapa efek, dan tentunya ini mungkin berbeda pada perangkat nyata: tolong beri komentar atau edit!)

    • Meskipun, lagi-lagi pada tahun 2012, plugin pemilih tanggal Android mencoba menggunakan API JavaScript yang sama dengan plugin iOS, dan contohnya digunakan allowOldDates, versi Android sebenarnya tidak mendukung itu. Juga, ia mengembalikan tanggal baru sebagai 2012/7/2 sementara versi iOS kembali Mon Jul 02 2012 00:00:00 GMT+0200 (CEST).

  • Bahkan ketika <input type="date"> didukung, semuanya mungkin terlihat berantakan:

    • iOS 5 dengan baik menampilkan 2012-06-01 dalam format yang dilokalkan, seperti 1 Jun. 2012 atau June 1, 2012 (dan bahkan perbarui yang langsung saat masih mengoperasikan pemilih tanggal). Namun, Galaxy S2 yang menjalankan Android 4.0.3 menunjukkan yang jelek 2012-6-1 atau 2012-06-01, tidak peduli lokal mana yang digunakan.

    • iOS 5 pada iPad (simulator) tidak menyembunyikan keyboard saat itu sudah terlihat ketika menyentuh input tanggal, atau saat menggunakan "sebelumnya" atau "berikutnya" di input lain. Kemudian secara bersamaan menampilkan pemilih tanggal di bawah masukan dan keyboard di bagian bawah, dan tampaknya untuk mengizinkan masukan apa pun dari keduanya. Namun, meskipun itu mengubah nilai yang terlihat, input keyboard sebenarnya diabaikan. (Ditampilkan ketika membaca kembali nilainya, atau ketika memohon pemilih tanggal lagi.) Saat keyboard belum ditampilkan, maka menyentuh input tanggal hanya menampilkan pemilih tanggal, bukan keyboard. (Ini mungkin berbeda pada perangkat nyata, tolong beri komentar atau edit!)

    • Perangkat mungkin menampilkan kursor di bidang masukan, dan penekanan yang lama mungkin memicu opsi papan klip, mungkin menunjukkan keyboard biasa juga. Saat mengeklik, beberapa perangkat bahkan mungkin menampilkan keyboard biasa selama sepersekian detik, sebelum berganti untuk menampilkan pemilih tanggal.


104
2018-06-01 20:58



iOS 5 sekarang mendukung HTML5 lebih baik. di webapp Anda

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

Android pada 4.0 tidak memiliki jenis dukungan menu asli ini.


14
2017-11-15 21:14



iOS5 memiliki dukungan untuk ini (Referensi). Jika Anda ingin memanggil pemilih tanggal asli, Anda mungkin memiliki opsi dengan PhoneGap (belum menguji ini sendiri).


5
2017-08-12 11:34



Memberikan Mobiscroll mencoba. Penentu tanggal dan pemilih waktu scroller terutama dibuat untuk interaksi pada perangkat sentuh. Ini cukup fleksibel, dan mudah dikustomisasi. Muncul dengan tema iOS / Android.


5
2017-09-07 09:43



Jawaban saya terlalu sederhana. Jika Anda suka menulis kode sederhana yang bekerja lintas platform, kemudian gunakan window.prompt metode untuk meminta pengguna untuk berkencan. Tentunya Anda perlu memvalidasi dengan regex dan kemudian membuat objek tanggal.

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

Di dalam kamu HTML:

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

3
2017-07-19 00:25



Anda bisa menggunakannya UI Trigger.io modul untuk menggunakan pemilih tanggal / waktu bawaan Android dengan masukan HTML5 biasa. Melakukan itu memang membutuhkan penggunaan kerangka kerja secara keseluruhan (jadi tidak berfungsi sebagai halaman web seluler biasa).

Anda dapat melihat sebelum dan sesudah tangkapan layar di entri blog ini: pemilih tanggal waktu


1
2017-11-16 19:10



Dalam HTML:

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

Di 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



Pada elemen formulir Anda gunakan input type="time". Ini akan menghemat semua kerumitan mencoba menggunakan perpustakaan pemilih data.


-6
2017-08-08 22:48