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

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

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.

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

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.

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?

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" />

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.

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 ...

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

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

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 [email protected]">
	<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>

Inilah solusi yang tepat. Anda harus menggunakan datepicker jquery di mana-mana

  <script>
  $( function() {
    $( ".simple_date" ).datepicker();
  } );
  </script>

Di bawah ini adalah tautan untuk mendapatkan kode lengkap

https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker

Inilah solusi sempurna. Anda harus menggunakan datepicker JQuery untuk memasukkan tanggal pengguna. Ini sangat mudah digunakan dan memiliki banyak fitur yang tidak dimiliki oleh tanggal input HTML.

Klik di sini untuk menyalin kode datepicker JQuery

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

<!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>