Як отримати тип введення HTML 5 = “дата”, що працює у Firefox та / або IE 10

Мені здається дивним, що input type="date"все ще не підтримується у Firefox після всього цього часу. Насправді, я не думаю, що вони додали багато (якщо вони є) нових типів HTML 5 у вхідному елементі. Не здивований, що він не підтримується в IE10. Отже, моє запитання ...

Як type="date"увімкнути inputелемент, що працює, не додаючи ще один .js-файл (а саме jQueryUIвіджет DatePicker), просто отримати календар / дату лише для браузерів IE та Firefox? Чи є щось там, що можна застосувати десь (можливо, CDN?), Що змусить цю функціональність працювати за замовчуванням у браузерах Firefox та / або IE ?? Намагаючись націлити на браузери IE 8+ та Firefox, не має значення, найновіша версія (28.0) буде добре.

ОНОВЛЕННЯ: Firefox 57+ підтримує тип введення = дата

Ви можете спробувати веб- пам’яті , яка доступна на cdn + завантажує поліфіл, якщо це потрібно.

Ось демонстрація з 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" />

Якщо конфігурація за замовчуванням не задовольняє, існує багато способів її налаштувати . Тут ви знайдете конфігуратор вибору дат .

Примітка. Хоча в майбутньому можуть з’явитися нові виправлення помилок для веб-файлів. Більш великих релізів більше не буде. Сюди входить підтримка jQuery 3.0 або будь-які нові функції.

Він знаходиться у Firefox з версії 51 (26 січня 2017 року), але він не активований за замовчуванням (поки що)

Щоб активувати його:

about: конфігурація

dom.forms.datetime -> встановлено значення true

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

Існує простий спосіб позбутися цього обмеження, використовуючи компонент datePicker, наданий jQuery.

1. Включити бібліотеки інтерфейсу jQuery та jQuery (я все ще використовую стару)

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

2. Скористайтеся наступним описом

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

Див. JQuery UI DatePicker - за потреби змініть формат дати .

Тип = "дата" не є фактичною специфікацією на даний момент. Це концепція, яку Google придумав, і міститься в їх специфікаціях Whatwg (не є офіційними) і підтримується Chrome лише частково.

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

Я б не покладався на цей тип введення в даний момент. Було б непогано мати, але я не передбачаю, що це справді може зробити це. Причина №1 полягає в тому, що вона надто сильно навантажує браузер, щоб визначити найкращий інтерфейс для дещо складного введення. Подумайте про це з чуйної точки зору, як би хтось із постачальників знав, що найкраще буде працювати з вашим інтерфейсом користувача на 400 пікселів, 800 пікселів і 1200 пікселів шириною?

Ось повний приклад з датою, відформатованою у РРРР-ММ-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" />

Хоча це не дозволяє отримати інтерфейс для вибору дати, Mozilla дозволяє використовувати шаблон, тому ви можете принаймні отримати перевірку дати таким чином:

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

Зрештою, я погоджуюся з @SuperUberDuper в тому, що Mozilla значно відстає від включення цього.

Це лише пропозиція, яка відповідає відповіді Дакса. (Я б сказав це у коментарі до цієї відповіді, але у мене ще недостатньо репутації, щоб коментувати інші питання).

Ідентифікатори повинні бути унікальними для кожного поля, тому, якщо у вашій формі (або формах) є кілька полів дати, ви можете використовувати елемент класу замість ідентифікатора:

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

і ваш внесок як:

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

Тепер, кожного разу, коли вам потрібен інструмент вибору дати, просто додайте цей клас. PS Я знаю, вам все одно доведеться використовувати js :(, але принаймні ви налаштовані на весь ваш сайт. Мої 2 копійки ...

Остання версія firefox the firefox 57 (Quantum) підтримує дату та інші функції, вона вийшла 14 листопада 2017 року. Ви можете завантажити її, натиснувши це посилання

Дякую Олександру, я знайшов спосіб змінити формат для en lang. (Не знав, який язик використовує такий формат)

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

 $.webshims.activeLang('en');

Іноді ви не хочете використовувати Datepicker http://jqueryui.com/datepicker/ в проекті , тому що:

• Ви не хочете використовувати jquery
• Конфлікт версій jquery у вашому проекті
• Вибір року не зручний. Наприклад, вам потрібно 120 натискань на кнопку prev, щоб перейти до 10 років тому.

Будь ласка, дивіться мій дуже простий код між браузера для введення дати. Мій код застосовується лише в тому випадку, якщо ваш браузер не підтримує введення типу дати

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

Ось правильне рішення. Ви повинні використовувати jquery datepicker скрізь

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

Нижче наведено посилання, щоб отримати повний код

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

Ось ідеальне рішення. Для введення дати користувача слід використати інструмент вибору дати JQuery. Він дуже простий у використанні та має багато функцій, які не мають дати введення HTML.

Натисніть тут, щоб скопіювати код вибору дати JQuery

Мені довелося використовувати bootstrap-datepickerплагін, щоб календар працював на Firefox 55 Portable:

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

Сумісний з Bootstrap v2 та v3. Він постачається з окремою таблицею стилів, тому вам не доведеться залежати від Bootstrap.

Використання:

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