Cara mendapatkan input HTML 5 type = "date" berfungsi di Firefox dan / atau IE 10


191

Saya merasa aneh bahwa input type="date"masih tidak didukung di Firefox setelah semua waktu ini. Bahkan, saya tidak berpikir mereka menambahkan banyak (jika ada) dari HTML 5 tipe baru pada elemen input. Tidak heran bahwa itu tidak didukung di IE10. Jadi, pertanyaan saya adalah ...

Bagaimana caranya agar type="date"suatu inputelemen berfungsi tanpa menambahkan, file .js lainnya (yaitu jQueryUIWidget DatePicker) hanya untuk mendapatkan kalender / tanggal hanya untuk Browser IE dan Firefox? Apakah ada sesuatu di luar sana yang dapat diterapkan di suatu tempat (mungkin CDN?) Yang akan membuat fungsi ini berfungsi secara default di Firefox dan / atau Browser IE ?? Mencoba menargetkan Browser IE 8+ dan untuk Firefox, tidak masalah, versi terbaru (28.0) akan baik-baik saja.

UPDATE: Firefox 57+ mendukung input type = date


29
Tampaknya konyol bagi saya bahwa Firefox masih tidak mendukung ini. Saya telah beralih dari Chrome ke Firefox hari ini, hanya untuk satu hari / minggu untuk melihat apa yang terjadi hari ini, dan ini segera membuat saya ingin beralih kembali!
Codemonkey

19
ini lelucon FF yang tidak memberikan tanggal
SuperUberDuper

6
Inilah sebabnya saya merasa sedih ketika orang mengatakan Firefox adalah browser terbaik.
Martin Braun

1
Meskipun bukan polyfill, saya hanya menggunakan pickaday yang merupakan js lib tanpa jquery atau dependensi lainnya ...
mb21

2
Tampaknya berfungsi secara default di Firefox 57. Tetap saja!
Antoine Pinsard

Jawaban:


138

Anda dapat mencoba webshims , yang tersedia di cdn + hanya memuat polyfill, jika diperlukan.

Berikut ini adalah demo dengan CDN: http://jsfiddle.net/trixta/BMEc9/

<!-- cdn for modernizr, if you haven't included it already -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/extras/modernizr-custom.js"></script>
<!-- polyfiller file to detect and load polyfills -->
<script src="http://cdn.jsdelivr.net/webshim/1.12.4/polyfiller.js"></script>
<script>
  webshims.setOptions('waitReady', false);
  webshims.setOptions('forms-ext', {types: 'date'});
  webshims.polyfill('forms forms-ext');
</script>

<input type="date" />

Jika konfigurasi default tidak memuaskan, ada banyak cara untuk mengkonfigurasinya . Di sini Anda menemukan konfigurator datepicker .

Catatan: Meskipun mungkin ada rilis perbaikan bug baru untuk webshim di masa depan. Tidak akan ada rilis besar lagi. Ini termasuk dukungan untuk jQuery 3.0 atau fitur baru.


ini adalah solusi yang bagus, konfigurasi kaya, tetapi saya tidak dapat menemukan tempat untuk mengatur format tanggal seperti "YYYY / MM / DD"
Pavel Niedoba

14
Saya mendapatkan kesalahan "akses ditolak" ketika saya mencoba menjalankan jsfiddle ini di IE 11, dan pemilih tanggal tidak berfungsi.
Shavais

4
Ini tidak berfungsi pada IE10 ... saya mendapatkan kesalahan yang sama seperti yang disebutkan oleh @Shavais ... untuk membuatnya berfungsi, tingkatkan versi jquery ke 1,11 atau lebih tinggi .. coba tautan
Nitin

2
Sayangnya, dukungan webshims ke Jquery 3 mendatang tidak akan dilakukan, seperti yang diinformasikan di situs penulis. Karena itu, saya akan mengandalkan UI Jquery yang baik dan lama.
marionmaiden

1
Ini pasti bekerja di firefox. Tetapi tidak bekerja di IE
Varuni NR

27

Itu ada di Firefox sejak versi 51 (26 Januari 2017), tetapi belum diaktifkan secara default (belum)

Untuk mengaktifkannya:

tentang: konfigurasi

dom.forms.datetime -> disetel ke true

https://developer.mozilla.org/en-US/Firefox/Experimental_features


Senang mendengarnya. Harus diaktifkan secara default imo. Tapi ini bagus untuk diketahui.
Solomon Closson

Saya menggunakan FF 64.0.2, tetapi meskipun opsi ini "benar" (aktif) tidak berfungsi, kotak datetime masih berupa teks. Saya sudah mencoba mengaktifkan "timepicker" tanpa hasil.
Wasted_Coder

20

Ada cara sederhana untuk menghilangkan pembatasan ini dengan menggunakan komponen datePicker yang disediakan oleh jQuery.

  1. Sertakan perpustakaan jQuery dan jQuery UI (saya masih menggunakan yang lama)

    • src = "js / jquery-1.7.2.js"
    • src = "js / jquery-ui-1.7.2.js"
  2. Gunakan snip berikut

    $(function() {
         $( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'}); 
    });
    

Lihat jQuery UI DatePicker - Ubah Format Tanggal jika diperlukan.


8
OP mengatakan "bekerja tanpa menambahkan, file .js lainnya (yaitu Widget DatePicker jQueryUI)" ... tapi pertanyaan ini adalah hit teratas google, jadi jawaban Anda masih SANGAT membantu meskipun memang tidak menjawab pertanyaan. Saya harap saya tidak perlu merasa sedih untuk membatalkan posting Anda sekarang.
phil294

2
Anda perlu memasukkan jQuery UI CSS juga untuk menampilkan kalender dengan benar. <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai

16

Jenis = "tanggal" bukanlah spesifikasi aktual pada saat ini. Ini adalah konsep yang dibuat Google dan dalam spesifikasi whatwg mereka (bukan resmi) dan hanya didukung sebagian oleh Chrome.

http://caniuse.com/#search=date

Saya tidak akan bergantung pada tipe input ini pada saat ini. Akan menyenangkan untuk dimiliki, tetapi saya tidak melihat ini benar-benar membuatnya. Alasan # 1 adalah terlalu banyak membebani browser untuk menentukan UI terbaik untuk input yang agak rumit. Pikirkan tentang hal ini dari sudut pandang responsif, bagaimana vendor mana pun tahu apa yang akan bekerja paling baik dengan UI Anda dengan lebar 400 piksel, 800 piksel dan 1200 piksel?


138
Saya tidak setuju, browser harus cukup pintar untuk mengetahui hal ini. Saya benar-benar lelah menggunakan pemetik tanggal di luar sana dan harus terus memperbarui mereka.
SuperUberDuper

49
Alasan yang aneh. Terlalu banyak beban untuk browser, tetapi tidak untuk pengembang web joe?!?
jeroenh

35
Ini sekarang bagian dari draft kerja HTML 5: w3.org/html/wg/drafts/html/master/…
Chris

7
Saya juga senang untuk setiap tipe input baru. Mereka lebih baik didefinisikan, dan asli, yang biasanya berarti cepat.
Tomáš Zato - Reinstate Monica

5
@ MM Terima kasih. Sementara itu, HTML 5 telah ditingkatkan ke rekomendasi W3C resmi. Tautan baru adalah w3.org/TR/2014/REC-html5-20141028/…
Chris

9

Ini adalah contoh lengkap dengan tanggal yang diformat dalam YYYY-MM-DD

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script src="//cdn.jsdelivr.net/webshim/1.14.5/polyfiller.js"></script>
<script>
webshims.setOptions('forms-ext', {types: 'date'});
webshims.polyfill('forms forms-ext');
$.webshims.formcfg = {
en: {
    dFormat: '-',
    dateSigns: '-',
    patterns: {
        d: "yy-mm-dd"
    }
}
};
</script>
<input type="date" />

1
Apakah ada yang tahu jika ini memungkinkan opsi untuk menambahkan pemilih waktu?
drooh

Saya mencoba skrip Anda di JSFiddle @Drooh tetapi tidak berhasil. Setiap kali saya memilih tanggal, ia muncul seperti milidetik di bidang input dan kemudian menghilang. Dapatkah seseorang memberikan versi biola yang berfungsi dengan konfigurasi tanggal dd / mm / yyyy?
Ryan Coolwebs

Catatan, pada Agustus 2016 webshim tidak berfungsi dengan jQuery 3 dan dalam pengujian saya juga tidak bekerja dengan 2.2.4.
drooh

Saya telah menemukan ini menjadi solusi terbaik sampai firefox menambahkan input tanggal stackoverflow.com/questions/2528706/…
drooh

4

Meskipun ini tidak memungkinkan Anda untuk mendapatkan datepicker ui, Mozilla mengizinkan penggunaan pola, jadi Anda setidaknya bisa mendapatkan validasi tanggal dengan sesuatu seperti ini:

pattern='(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))'

Pada akhirnya saya setuju dengan @SuperUberDuper bahwa Mozilla jauh di belakang termasuk ini secara asli.


1
apakah ada versi untuk "waktu"?
Malcolm Salvador

1
Perluas contoh ini. Apakah ini atribut html untuk input?
Wasted_Coder

3

Ini hanya saran yang mengikuti jawaban Dax. (Saya akan menuliskannya di jawaban itu, tetapi saya belum memiliki reputasi yang cukup untuk mengomentari pertanyaan lain).

Id harus unik untuk setiap bidang, jadi, jika Anda memiliki beberapa bidang tanggal di formulir Anda (atau formulir), Anda bisa menggunakan elemen kelas alih-alih ID:

 $(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });

dan masukan Anda sebagai:

 <input type="text" class="datepicker" name="your-name" />

Sekarang, setiap kali Anda membutuhkan pemilih tanggal, cukup tambahkan kelas itu. PS Saya tahu, Anda masih harus menggunakan js :(, tapi setidaknya Anda ditetapkan untuk semua situs Anda. 2 sen saya ...


3

Versi terbaru dari firefox the firefox 57 (Quantum) mendukung tanggal dan fitur-fitur lain yang dirilis pada 14 November 2017. Anda dapat mengunduhnya dengan mengklik tautan ini


0

Terima kasih Alexander, saya menemukan cara bagaimana mengubah format untuk bahasa. (Tidak tahu bahasa apa yang menggunakan format seperti itu)

 $.webshims.formcfg = {
        en: {
            dFormat: '/',
            dateSigns: '/',
            patterns: {
                d: "yy/mm/dd"
            }
        }
     };

 $.webshims.activeLang('en');

Saya pikir satu-satunya negara 'en' yang menggunakan format itu adalah Kanada. Bagaimanapun, 'en' bersifat mendua, karena juga termasuk Amerika Serikat, yang memiliki format tanggal 'khusus' sendiri.
Michael Scheper

Dalam kasus saya ini tentang format tanggal utama untuk setiap lokal klien, yang mungkin berbeda pada workstation klien. Namun pada satu halaman tertentu saya ingin menggunakan format tanggal ini (untuk alasan tempel salinan). Ini lebih seperti komentar untuk jawaban Alexander Farkas tetapi saya menempatkan sebagai jawaban terpisah karena saya tidak dapat menempelkan kode dalam komentar. Saya menggunakan ini di lingkungan produksi selama lebih dari satu tahun.
Pavel Niedoba

Hati-hati. Jika Webshims bergantung pada interpretasi browser dari lokal, Anda mungkin akan mendapatkan hasil yang tidak terduga. 'en' mungkin tidak akan berarti format yang sama pada platform yang berbeda (tergantung pada sistem lokal) atau bahkan di browser yang berbeda. Ini dapat diartikan sebagai 'en-ca' oleh peramban di Kanada (yang kemungkinan besar adalah tttt-bb-hh, tapi mungkin tidak konsisten) tetapi 'en-in' oleh peramban di India (yang, seperti sebagian besar dunia) , akan menghasilkan dd-mm-yyyy). Hanya karena ada dalam kode produksi tidak berarti telah diuji dengan benar — banyak bug i18n ada dalam kode produksi, bahkan di situs-situs besar.
Michael Scheper

Baris terakhir $ .webshims.activeLang ('en'); harus memaksa lang (atau lokal) ke webshims mengesampingkan pengaturan browser, sehingga formatnya selalu sama.
Pavel Niedoba

0

Terkadang Anda tidak ingin menggunakan Datepicker http://jqueryui.com/datepicker/ dalam proyek Anda karena:

  • Anda tidak ingin menggunakan jquery
  • Konflik versi jquery di proyek Anda
  • Pilihan tahun ini tidak nyaman. Misalnya Anda perlu 120 klik pada tombol prev untuk pindah ke 10 tahun yang lalu.

Silakan lihat kode browser silang saya yang sangat sederhana untuk input tanggal. Kode saya hanya berlaku jika browser Anda tidak mendukung input tipe tanggal

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Date field</h1>
    Date:
    <input type='date' id='date' />
    New date: <span id="NewDate"></span>
    <script>
        CreateDateFilter('date', {
                formatMessage: 'Please type date %s'
                , onblur: function (target) {
                    if (target.value == target.defaultValue)
                        return;
                    document.getElementById('NewDate').innerHTML = target.value;
                }
                , min: new Date((new Date().getFullYear() - 10).toString()).toISOString().match(/^(.*)T.*$/i)[1]//'2006-06-27'//10 years ago
                , max: new Date().toISOString().match(/^(.*)T.*$/i)[1]//"2016-06-27" //Current date
                , dateLimitMessage: 'Please type date between "%min" and "%max"'
            }
        );
    </script>

</body>
</html>


3
Kode ini sepenuhnya gagal. Saya tidak bisa mengetikkan tanggal karena bidang sudah diisi dengan "YYY-MM-DD", dan jika saya mencoba untuk menghapusnya, itu muncul kembali.
Stephen R

Tolong jangan hapus tanda hubung. Saya telah berhasil menguji di Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11. Tolong beritahu saya perangkat Anda, OS dan browser.
Andrej

Sebenarnya saya hanya menekan tautan "Jalankan Kutipan Kode" tepat di bawah komentar Anda. Saya tidak bisa mengetikkan tanggal dengan benar karena placeholder "YYYY-MM-DD" secara aktif bersaing dengan saya daripada menghilang ketika saya mulai mengetik. Saya menggunakan Firefox terbaru pada Windows 10.
Stephen R

1
tidak menjawab pertanyaan karena melanggar kondisi tidak menambahkan file JS eksternal, dan sebenarnya kode itu sendiri sepenuhnya tidak intuitif untuk digunakan. memaksa format ISO pada orang-orang walaupun itu bukan format tanggal asli mereka, tidak dapat mengetikkan tanggal baru ketika topeng input muncul kembali, tidak dapat mengetikkan topeng input secara berlebihan sebagai bukan topeng tetapi teks aktual dalam kotak, harus menghapus topeng sebagai Anda mengetik. tidak lebih baik daripada input standar dengan validasi regex
MikeT



-1

Saya harus menggunakan bootstrap-datepickerplugin untuk membuat kalender berfungsi di Firefox 55 Portable:

https://bootstrap-datepicker.readthedocs.io/en/latest/

Kompatibel dengan Bootstrap v2 dan v3. Muncul dengan stylesheet mandiri sehingga Anda tidak harus bergantung pada Bootstrap.

Pemakaian:

<input class="datepicker">

$('.datepicker').datepicker({
    format: 'mm/dd/yyyy'
});

-2
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.