Мне кажется странным, что input type="date"
по-прежнему не поддерживается в Firefox после всего этого времени. На самом деле, я не думаю, что они добавили много (если есть) из новых типов HTML 5 на элемент ввода. Не удивлен, что он не поддерживается в IE10. Итак, мой вопрос...
Как получить type="date"
в элементе input
, работающем без добавления, еще один файл .js(а именно jQueryUI
DatePicker Widget), чтобы получить календарь/дату только для браузеров IE и Firefox? Есть ли что-то, что можно применить где-нибудь (возможно, CDN?), Что сделает эту функциональность по умолчанию в Firefox и/или браузерах IE? Попробуйте настроить браузер IE 8+ и Firefox, не имеет значения, самая новая версия (28.0) будет в порядке.
ОБНОВЛЕНИЕ: Firefox 57+ поддерживает тип ввода = дата
Вы можете попробовать webshims, который доступен на cdn + загружает только polyfill, если это необходимо.
Вот демо с 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" />
Если конфигурация по умолчанию не удовлетворяет, есть несколько способов настроить ее. Здесь вы найдете конфигуратор датпикера.
Примечание. Хотя в будущем могут появиться новые выпуски исправлений для webshim. Больше не будет никаких крупных выпусков. Это включает поддержку jQuery 3.0 или любых новых функций.
Это в Firefox с версии 51 (26 января 2017 года), но он по умолчанию не активирован (пока)
Чтобы активировать его:
о: конфигурации
dom.forms.datetime → установить значение true
https://developer.mozilla.org/en-US/Firefox/Experimental_features
Существует простой способ избавиться от этого ограничения, используя компонент datePicker, предоставленный jQuery.
Включить библиотеки jQuery и jQuery UI (Я все еще использую старый)
Используйте следующий снип
$(function() {
$( "#id_of_the_component" ).datepicker({ dateFormat: 'yy-mm-dd'});
});
Смотрите jQuery UI DatePicker - измените формат даты, если это необходимо.
Тип = "дата" не является фактической спецификацией на данный момент. Это концепция, которую Google придумала и находится в своих спецификациях (не является официальной) и частично поддерживается Chrome.
http://caniuse.com/#search=date
Я бы не стал полагаться на этот тип ввода в этот момент. Было бы неплохо иметь, но я не предвижу, что это действительно делает это. Причина №1 заключается в том, что он слишком сильно нагружает браузер, чтобы определить лучший пользовательский интерфейс для несколько сложного ввода. Подумайте об этом с отзывчивой точки зрения, как любой из поставщиков узнает, что лучше всего будет работать с вашим пользовательским интерфейсом, скажем, в 400 пикселей, 800 пикселей и 1200 пикселей в ширину?
Вот полный пример с датой, отформатированной в 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" />
В то время как это не позволяет вам получать datepicker ui, 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 отстает от этого.
Последняя версия firefox firefox 57 (Quantum) поддерживает дату и другие функции, которые были выпущены 14 ноября 2017 года. Вы можете скачать ее, нажав эта ссылка
Это просто предложение, которое следует за ответом Дакса. (Я бы поставил его в комментарии на этот ответ, но у меня пока нет достаточной репутации, чтобы комментировать другие вопросы).
Идентификатор должен быть уникальным для каждого поля, поэтому, если у вас есть несколько полей даты в вашей форме (или формах), вы можете использовать элемент класса вместо ID:
$(function() { $( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' }); });
и ваш ввод:
<input type="text" class="datepicker" name="your-name" />
Теперь, каждый раз, когда вам нужен выбор даты, просто добавьте этот класс. PS Я знаю, вам все равно придется использовать js:(, но по крайней мере вы настроены для всего своего сайта. Мои 2 цента...
Вот правильное решение. Вы должны использовать jquery datepicker всюду
<script>
$( function() {
$( ".simple_date" ).datepicker();
} );
</script>
Ниже приведена ссылка, чтобы получить полный код
https://tutorialvilla.com/how/how-to-solve-the-problem-of-html-date-picker
Вот идеальное решение. Вы должны использовать JQuery datepicker к дате ввода пользователя. Он очень прост в использовании и обладает множеством функций, которые не имеют даты ввода HTML.
Иногда вы не хотите использовать Datepicker http://jqueryui.com/datepicker/ в своем проекте, потому что:
Пожалуйста, посмотрите мой очень простой код кросс-браузера для ввода даты. Мой код применяется только в том случае, если ваш браузер не поддерживает ввод типа даты
<!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>
Спасибо Александру, я нашел способ изменения формата для en lang. (Не знал, какой язык использует такой формат)
$.webshims.formcfg = {
en: {
dFormat: '/',
dateSigns: '/',
patterns: {
d: "yy/mm/dd"
}
}
};
$.webshims.activeLang('en');
<!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>