У меня есть поле ввода с типом = "дата", все работает отлично в IE, но в последней версии Chrome он поставляется с прядильщиком, стрелкой вниз и с помощью заполнитель mm/dd/yyyy.
В Chrome, щелкнув это поле, Chrome открывает датпикер, и я применил jquery ui datepicker для моего использования приложения. Они оба сталкиваются с ними, как показано ниже:
Я применил исправление, как показано ниже:
input[type="date"]::-webkit-calendar-picker-indicator{
display:none;
-webkit-appearance: none;
margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
display:none !important;
-webkit-appearance: none !important;
visibility: hidden !important;
}
/** THIS DOESN'T WORK **/
После добавления вышеуказанного кода он выглядит как мудрый:
В приведенном выше коде прячется прядильщик и стрелка, которые запускают сборщик хромированных данных. Но есть проблема, placeholder ('mm/dd/yyyy') все еще присутствует для входного текстового поля; мой jquery ui date picker подходит нормально, но когда я выбираю любые даты, местозаполнитель все еще там.
В этом поле ввода нет значения.
Необходимо знать, как удалить этот заполнитель для установки значения; также формат даты, который я использую для приложения, равен yyyy/mm/dd.
Версия Chrome: Версия 27.0.1448.0
Спасибо заранее!
Я обработал сложный путь, у меня есть поле даты как type="text", и я добавил атрибут как data-type="date"
В jquery я запускаю код для динамической замены type="text и data-type="date" на type="date", поэтому браузер не делает его поле даты при загрузке, но мой jquery ui datepicker вызывается как я динамически добавив его как type="date"...:)
Надеюсь, что это кому-то полезно.
Chrome 27 теперь поддерживает типы полей datepicker (как и Opera)
Вы можете проверить с помощью modernizr.js, если поле даты поддерживается. Modernizr.inputtypes.date возвращает true, если поле даты поддерживается браузером.
Следующий код устанавливает JQuery UI datepicker, только если поле даты не поддерживается:
<script src="modernizr.js"></script>
<script>Modernizr.load({
test: Modernizr.inputtypes.date,
nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
complete: function () {
$('input[type=date]').datepicker({
dateFormat: 'yy-mm-dd'
});
}
});
</script>
Используя Modernizr для обнаружения функций HTML5 и обеспечения резервных копий
Вы можете просто удалить тип "date" и переключить его на "text", как в следующем скрипте:
удачи
jsfiddle
removeDefaultDate = function(){
$('input[type=date]').each(function(){
this.type="text";
});
$('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}
У меня была аналогичная проблема. В моей модели /viewmodel я указал тип данных как DataType.Date Я заметил, что когда я удалил это, сборщик дат начал работать в Chrome. Я думаю, что попытался изменить тип данных как DataType.DateTime и снова попытался в chrome. Это решило проблему. Не уверен, что это относится ко всем, но это вызвало у меня много головной боли, поэтому это может помочь кому-то. Это работало в MVC4 с использованием jqueryUI 1.8.20
Он то, что я обычно использую. У меня есть несколько различных форматов используемого datepicker, поэтому я не использую его для всех входов даты. Однако изменение селектора на то, что лучше всего подходит вам.
<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
$('.date-picker').datepicker(
{
showButtonPanel: true,
gotoCurrent: true,
changeMonth: true,
changeYear: true,
showAnim: 'slideDown'
}
);
}
});// END DOM Ready
</script>
Google предложил другой способ разрешения этого конфликта, который я нашел полезным, в нижней части этого поста.
var isDateInputSupported = function(){
var elem = document.createElement('input');
elem.setAttribute('type','date');
elem.value = 'foo';
return (elem.type == 'date' && elem.value != 'foo');
}
if (!isDateInputSupported()) // or.. !Modernizr.inputtypes.date
$('input[type="date"]').datepicker();