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

191

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

Solomon Closson
źródło
29
Śmieszne wydaje mi się to, że Firefox wciąż tego nie obsługuje. Dzisiaj przestawiłem się z Chrome na Firefox, tylko na dzień / tydzień, aby zobaczyć, co się dzieje w tych dniach, a to od razu chce mnie zmienić!
Codemonkey
19
to żart FF nie data
zakończenia
6
Właśnie dlatego denerwuję się, gdy ludzie mówią, że Firefox jest najlepszą przeglądarką.
Martin Braun
1
Chociaż nie jest to polifill, skończyłem na picaday, który jest zwykłą biblioteką js bez jquery lub innych zależności ...
mb21,
2
Wygląda na to, że domyślnie działa w przeglądarce Firefox 57. Nadal!
Antoine Pinsard

Odpowiedzi:

138

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.

Alexander Farkas
źródło
to miłe rozwiązanie, konfiguracja jest bogata, ale nie mogę znaleźć, gdzie ustawić format daty, np. „RRRR / MM / DD”
Pavel Niedoba
14
Podczas próby uruchomienia tego jsfiddle w IE 11 pojawia się błąd „odmowa dostępu”, a wybór daty nie działa.
Shavais,
4
To nie działa na IE10 ... otrzymuję ten sam błąd, jak wspomniany przez @Shavais ... aby go uruchomić zaktualizuj jquery do wersji 1.11 lub nowszej ... spróbuj tego linku
Nitin
2
Niestety wsparcie dla webshimsów w nadchodzącym Jquery 3 nie zostanie wykonane, jak poinformowano na stronie autora. W takim razie polegałbym na dobrym i starym interfejsie Jquery.
marionmaiden
1
To zdecydowanie działa w Firefoksie. Ale nie działał w IE
Varuni NR
27

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

Jonathan Vanasse
źródło
Dobrze to słyszeć. Powinny być domyślnie włączone imo. Ale to dobrze wiedzieć.
Solomon Closson
Korzystam z FF 64.0.2, ale nawet jeśli ta opcja jest ustawiona na „prawda” (on), to nie działa, pole daty i godziny jest nadal tylko tekstem. Próbowałem włączyć „timepicker” również bez powodzenia.
Wasted_Coder
20

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 .

Dax
źródło
8
OP mówi „działa bez dodawania kolejnego pliku .js (a mianowicie jQueryUI DatePicker Widget)”… ale to pytanie jest hitem Google, więc twoja odpowiedź jest naprawdę BARDZO pomocna, chociaż nie odpowiada na pytanie. Żałuję, że nie musiałem się teraz czuć źle, oceniając twój post.
phil294,
2
Aby poprawnie wyświetlić kalendarz, musisz także dołączyć jQuery UI CSS. <br> <link rel = "stylesheet" href = "// code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
YuAn Shaolin Maculelê Lai
16

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?

Chris Love
źródło
138
Nie zgadzam się, przeglądarki powinny być wystarczająco inteligentne, aby to zrozumieć. Naprawdę jestem zmęczony używaniem selektorów dat i ich aktualizowaniem.
SuperUberDuper,
49
Dziwne rozumowanie. Zbyt duże obciążenie dla przeglądarek, ale nie dla Joe Web Developer?!?
jeroenh,
35
To jest teraz część roboczej wersji HTML 5: w3.org/html/wg/drafts/html/master/…
Chris
7
Ja też jestem zadowolony z każdego nowego typu danych wejściowych. Są lepiej zdefiniowane i rodzime, co zwykle oznacza szybkie.
Tomáš Zato - Przywróć Monikę
5
@MM Dzięki. W międzyczasie HTML 5 został zaktualizowany do oficjalnej rekomendacji W3C. Nowy link to w3.org/TR/2014/REC-html5-20141028/…
Chris
9

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" />
drooh
źródło
1
Czy ktoś wie, czy pozwala to również na dodanie opcji wyboru czasu?
Drooh
Próbowałem twojego skryptu w JSFiddle @Drooh, ale to nie działa. Za każdym razem, gdy wybieram datę, w polu wprowadzania pojawia się ona jak milisekunda, a następnie znika. Czy ktoś może dostarczyć działającą wersję skrzypiec z konfiguracją daty dd / mm / rrrr?
Ryan Coolwebs,
Uwaga: od sierpnia 2016 webshim nie działa z jQuery 3, aw moich testach też nie działa z 2.2.4.
drooh
Uważam, że jest to najlepsze rozwiązanie, dopóki Firefox nie doda danych wejściowych stackoverflow.com/questions/2528706/…
drooh
4

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.

ajax1515
źródło
1
czy istnieje wersja „czasu”?
Malcolm Salvador
1
Rozwiń ten przykład. Czy to atrybut HTML dla danych wejściowych?
Wasted_Coder
3

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

kodispoetry
źródło
3

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

irfandar
źródło
0

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');
Pavel Niedoba
źródło
Myślę, że jedynym krajem używającym tego formatu jest Kanada. W każdym razie „en” jest niejednoznaczne, ponieważ obejmuje także Stany Zjednoczone, które mają swój własny „specjalny” format daty.
Michael Scheper
W moim przypadku chodzi o zastąpienie formatu daty dla dowolnego ustawienia narodowego klienta, które może się różnić na stacjach roboczych klienta. Jednak na jednej konkretnej stronie chcę użyć tego formatu daty (z powodu wklejania kopii). To bardziej jak komentarz do odpowiedzi Alexandra Farkasa, ale jako osobną odpowiedź podaję, ponieważ nie mogę wkleić kodu w komentarzu. Używam tego w środowisku produkcyjnym od ponad roku.
Pavel Niedoba
Bądź ostrożny. Jeśli Webshims polega na interpretacji ustawień regionalnych przez przeglądarkę, możesz mieć nieprzewidywalne wyniki. „pl” prawdopodobnie nie będzie oznaczać tego samego formatu na różnych platformach (w zależności od ustawień regionalnych systemu) ani nawet w różnych przeglądarkach. Może to być interpretowane jako „en-ca” przez przeglądarkę w Kanadzie (która najprawdopodobniej rrrr-mm-dd, ale być może nie jest spójna), ale „en-in” przez przeglądarkę w Indiach (która, podobnie jak większość świata , dałoby dd-mm-rrrr). To, że znajduje się w kodzie produkcyjnym, nie oznacza, że ​​został poprawnie przetestowany - w kodzie produkcyjnym występuje wiele błędów i18n, nawet w dużych witrynach.
Michael Scheper
Ostatni wiersz $ .webshims.activeLang ('en'); powinien wymusić język (lub ustawienia regionalne) do webshimów zastępujących ustawienia przeglądarki, więc format jest zawsze taki sam.
Pavel Niedoba
0

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>

Andrej
źródło
3
Ten kod całkowicie zawodzi. Nie mogę wpisać daty, ponieważ pole jest już wypełnione „RRRR-MM-DD”, a jeśli spróbuję je wyczyścić, pojawi się ponownie.
Stephen R
Nie usuwaj myślników. Z powodzeniem przetestowałem w systemie Windows 10 Google Chrome 52, Firefox 41, Opera 39, Microsoft Edge, IE 11. Powiedz mi swoje urządzenie, system operacyjny i przeglądarkę.
Andrej,
Właśnie klikam link „Uruchom fragment kodu” tuż pod Twoim komentarzem. Nie mogę poprawnie wpisać daty, ponieważ symbol zastępczy „RRRR-MM-DD” aktywnie ze mną konkuruje, a nie znika, gdy zaczynam pisać. Korzystam z najnowszej przeglądarki Firefox w systemie Windows 10.
Stephen R
1
nie odpowiada na pytanie, ponieważ narusza warunek nie dodawania zewnętrznych plików JS, a sam kod jest całkowicie nieintuicyjny w użyciu. wymusza na ludziach format ISO, nawet jeśli nie jest to ich natywny format daty, nie może wpisać nowej daty, gdy maska ​​wejściowa pojawia się ponownie, nie może nadpisać maski wprowadzania, ponieważ nie jest to maska, ale rzeczywisty tekst w polu, należy usunąć maskę jako ty pisz. i tak nie jest lepszy niż standardowe wejście z sprawdzaniem poprawności wyrażenia regularnego
MikeT
-1

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

Santosh Devnath
źródło
-1

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'
});
Santiago rezygnuje z SO
źródło
-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>
WAYSER
źródło