Jak uzyskać typ danych wejściowych HTML 5 = „data” działający w przeglądarce Firefox i / lub IE 10

Dziwne input type="date"jest to, że po tym czasie wciąż nie jest obsługiwany w przeglądarce Firefox. W rzeczywistości nie sądzę, aby dodali wiele (jeśli w ogóle) nowych typów HTML 5 do elementu wejściowego. Nic dziwnego, że nie jest obsługiwany w IE10. Więc moje pytanie brzmi ...

Jak dostać się type="date"na inputobróbkę elementów bez dodając kolejny, js plik (mianowicie jQueryUIDatePicker widget), aby dostać się do kalendarza / datę tylko IE i Firefox przeglądarek? Czy jest coś, co można gdzieś zastosować (być może CDN?), Co sprawi, że ta funkcja będzie działać domyślnie w przeglądarkach Firefox i / lub IE? Próbowanie kierowania na przeglądarki IE 8+ i Firefox nie ma znaczenia, najnowsza wersja (28.0) będzie w porządku.

AKTUALIZACJA: Firefox 57+ obsługuje typ danych wejściowych = data

Możesz wypróbować webshimy , które są dostępne na cdn +, ładuje tylko polifill, jeśli jest to potrzebne.

Oto demo z 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" />

Jeśli domyślna konfiguracja nie spełnia wymagań, istnieje wiele sposobów jej konfiguracji . Tutaj znajdziesz konfigurator datepicker .

Uwaga: Chociaż w przyszłości mogą pojawić się nowe wersje poprawek dla webshim. Nie będzie już żadnych większych wydań. Obejmuje to obsługę jQuery 3.0 lub dowolne nowe funkcje.

Jest w przeglądarce Firefox od wersji 51 (26 stycznia 2017 r.), Ale domyślnie nie jest aktywowany (jeszcze)

Aby go aktywować:

about: config

dom.forms.datetime -> ustawione na true

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

Jest prosty sposób na pozbycie się tego ograniczenia za pomocą składnika datePicker dostarczonego przez jQuery.

1. Dołącz biblioteki jQuery i jQuery UI (nadal używam starej)

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

2. Użyj następującego snipa

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

Zobacz jQuery UI DatePicker - w razie potrzeby zmień format daty .

Typ = „data” nie jest w tym momencie faktyczną specyfikacją. Jest to koncepcja, którą wymyślił Google i jest zgodna ze specyfikacjami whatwg (nieoficjalna) i jest tylko częściowo obsługiwana przez Chrome.

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

W tym momencie nie polegałbym na tym typie danych wejściowych. Byłoby miło mieć, ale nie przewiduję, że ten faktycznie go stworzy. Powodem nr 1 jest to, że nakłada zbyt duże obciążenie na przeglądarkę, aby określić najlepszy interfejs użytkownika dla nieco skomplikowanych danych wejściowych. Pomyśl o tym z responsywnego punktu widzenia, skąd którykolwiek ze sprzedawców wiedziałby, co będzie najlepiej działać z twoim interfejsem użytkownika przy 400, 800 i 1200 pikseli szerokości?

Oto pełny przykład z datą sformatowaną w RRRR-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" />

Chociaż nie pozwala to uzyskać interfejsu użytkownika datepicker, Mozilla zezwala na użycie wzorca, więc możesz przynajmniej uzyskać weryfikację daty za pomocą czegoś takiego:

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

Ostatecznie zgadzam się z @SuperUberDuper, że Mozilla jest daleko w tyle, jeśli chodzi o włączenie tego natywnie.

To tylko sugestia wynikająca z odpowiedzi Daxa. (Chciałbym umieścić go w komentarzu do tej odpowiedzi, ale nie mam jeszcze wystarczającej reputacji, aby komentować inne pytania).

Identyfikatory powinny być unikalne dla każdego pola, więc jeśli masz wiele pól daty w formularzu (lub formularzach), możesz użyć elementu class zamiast identyfikatora:

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

i twój wkład jako:

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

Teraz za każdym razem, gdy potrzebujesz selektora dat, po prostu dodaj tę klasę. PS Wiem, nadal musisz używać js :(, ale przynajmniej jesteś ustawiony na całą swoją stronę. Moje 2 centy ...

Najnowsza wersja firefoxa firefox 57 (Quantum) obsługuje datę i inne funkcje, które zostały wydane 14 listopada 2017 r. Możesz go pobrać, klikając ten link

Dzięki Alexander, znalazłem sposób na modyfikację formatu en lang. (Nie wiedziałem, który język używa takiego formatu)

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

 $.webshims.activeLang('en');

Czasami nie chcesz używać Datepicker http://jqueryui.com/datepicker/ w swoim projekcie, ponieważ:

• Nie chcesz używać jquery
• Konflikt wersji jquery w twoim projekcie
• Wybór roku nie jest wygodny. Na przykład potrzebujesz 120 kliknięć przycisku poprzedni, aby przejść do 10 lat temu.

Proszę zobaczyć mój bardzo prosty kod przeglądarki dla wprowadzania daty. Mój kod ma zastosowanie tylko wtedy, gdy twoja przeglądarka nie obsługuje wprowadzania typu daty

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

Oto właściwe rozwiązanie. Powinieneś wszędzie używać JQuery Datepicker

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

Poniżej znajduje się link do uzyskania pełnego kodu

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

Oto idealne rozwiązanie. Powinieneś używać JQuery datepicker do wprowadzania danych przez użytkownika. Jest bardzo łatwy w użyciu i ma wiele funkcji, których nie ma w danych wejściowych HTML.

Kliknij tutaj, aby skopiować kod wyboru daty JQuery

Musiałem użyć bootstrap-datepickerwtyczki, aby kalendarz działał w przeglądarce Firefox 55 Portable:

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

Kompatybilny z Bootstrap v2 i v3. Jest dostarczany z niezależnym arkuszem stylów, więc nie musisz polegać na Bootstrap.

Stosowanie:

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