HTML 5 giriş türü = “date” Firefox ve / veya IE 10'da nasıl çalışır?

Bunca input type="date"zaman sonra Firefox'ta hala desteklenmeyen garip buluyorum . Aslında, bir giriş öğesinde HTML 5 yeni türlerin çoğunu (varsa) eklediklerini sanmıyorum. IE10'da desteklenmediğine şaşırmadım. Benim sorum ...

Sadece IE ve Firefox Tarayıcıları için bir takvim / tarih almak için başka bir .js dosyası (yani DatePicker Widget) eklemeden çalışan type="date"bir inputöğeye nasıl jQueryUIulaşılır? Firefox ve / veya IE Tarayıcılarında bu işlevselliği varsayılan olarak çalıştıracak bir yere (belki de CDN?) Uygulanabilecek bir şey var mı? IE 8+ Tarayıcıları ve Firefox'u hedeflemeye çalışmak önemli değil, en yeni sürüm (28.0) iyi olacak.

GÜNCELLEME: Firefox 57+ giriş türünü = tarih destekler

Gerekirse , cdn + ' da bulunan webshims'i deneyebilirsiniz .

İşte CDN ile bir demo: 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" />

Varsayılan yapılandırmanın sağlanmaması durumunda, yapılandırmanın birçok yolu vardır . Burada tarih seçici yapılandırıcısını bulabilirsiniz .

Not: İleride webshim için yeni hata düzeltme sürümleri olabilir. Artık büyük sürüm olmayacak. Bu, jQuery 3.0 veya yeni özellikler için destek içerir.

Sürüm 51'den (26 Ocak 2017) beri Firefox'ta, ancak varsayılan olarak etkin değil (henüz)

Etkinleştirmek için:

about: config

dom.forms.datetime -> true olarak ayarla

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

JQuery tarafından sağlanan datePicker bileşenini kullanarak bu kısıtlamadan kurtulmanın basit bir yolu vardır .

1. JQuery ve jQuery UI kitaplıklarını dahil et (Hala eskisini kullanıyorum)

   • src = "js / jquery-1.7.2.js"
   • src = "js / jquery-ui-1.7.2.js"

2. Aşağıdaki alıntıyı kullanın

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

Bkz. JQuery UI DatePicker - Gerekirse Tarih Biçimini Değiştir .

Type = "date" bu noktada gerçek bir şartname değildir. Bu, Google'ın ortaya koyduğu bir kavramdır ve teknik özelliklerinde (resmi değil) bulunur ve yalnızca Chrome tarafından kısmen desteklenir.

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

Bu noktada bu girdi türüne güvenmem. Sahip olmak güzel olurdu, ama bunu gerçekten yapmasını öngörmüyorum. # 1 nedeni, biraz karmaşık bir giriş için en iyi kullanıcı arayüzünü belirlemek için tarayıcıya çok fazla yük getirmesidir. Duyarlı bir perspektiften düşünün, satıcılardan herhangi biri 400 piksel, 800 piksel ve 1200 piksel genişliğindeki kullanıcı arayüzünüzle neyin en iyi çalışacağını nasıl bilebilir?

İşte tarih YYYY-AA-GG olarak biçimlendirilmiş tam bir örnek

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

Bu, bir tarih seçici kullanıcı arayüzü almanıza izin vermese de, Mozilla desen kullanımına izin verir, böylece en azından böyle bir şeyle tarih doğrulaması alabilirsiniz:

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

Nihayetinde @SuperUberDuper'e katılıyorum, çünkü Mozilla bunu doğal olarak dahil etmenin çok gerisinde.

Bu sadece Dax'ın cevabını takip eden bir öneri. (Bu cevaba bir yorumda yazardım, ancak başkalarının soruları hakkında yorum yapmak için henüz yeterli üne sahip değilim).

Kimlikler her alan için benzersiz olmalıdır, bu nedenle formunuzda (veya formlarınızda) birden çok tarih alanınız varsa, kimlik yerine sınıf öğesini kullanabilirsiniz:

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

ve girdiniz:

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

Şimdi, tarih seçiciye her ihtiyacınız olduğunda, o sınıfı eklemeniz yeterlidir. PS biliyorum, hala js :( kullanmak zorunda, ama en azından tüm siteniz için hazırsınız.

Firefox'un en son sürümü firefox 57 (Quantum), 14 Kasım 2017'de yayınlandığı tarihi ve diğer özellikleri desteklemektedir. Bu bağlantıyı tıklayarak indirebilirsiniz.

Teşekkürler Alexander, en lang için formatı değiştirmenin bir yolunu buldum. (Hangi dilin bu biçimi kullandığını bilmiyordum)

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

 $.webshims.activeLang('en');

Bazen projenizde Datepicker http://jqueryui.com/datepicker/ kullanmak istemezsiniz çünkü:

• Jquery kullanmak istemiyorsunuz
• Projenizde jquery sürümleri çakışması
• Yılın seçimi uygun değil. Örneğin, 10 yıl öncesine geçmek için önceki düğmeye 120 kez tıklamanız gerekiyor.

Tarih girişi için lütfen çok basit çapraz tarayıcı koduma bakın. Kodum yalnızca tarayıcınız tarih türü girişini desteklemiyorsa geçerlidir

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

İşte doğru çözüm. Her yerde jquery datepicker kullanmalısınız

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

Kodun tamamını almak için bağlantı aşağıdadır

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

İşte mükemmel çözüm. Kullanıcı giriş tarihine JQuery tarih seçici kullanmalısınız. Kullanımı çok kolaydır ve HTML giriş tarihinin sahip olmadığı birçok özelliğe sahiptir.

JQuery tarih seçici kodunu kopyalamak için burayı tıklayın

bootstrap-datepickerTakvimin Firefox 55 Portable'da çalışmasını sağlamak için eklenti kullanmak zorunda kaldım :

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

Bootstrap v2 ve v3 ile uyumludur. Bağımsız bir stil sayfası ile birlikte gelir, böylece Bootstrap'e bağımlı olmanız gerekmez.

Kullanımı:

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