Chrome type = "date" и jquery ui date picker clashing

У меня есть поле ввода с типом = "дата", все работает отлично в 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

Спасибо заранее!

Ответ 1

Я обработал сложный путь, у меня есть поле даты как type="text", и я добавил атрибут как data-type="date"

В jquery я запускаю код для динамической замены type="text и data-type="date" на type="date", поэтому браузер не делает его поле даты при загрузке, но мой jquery ui datepicker вызывается как я динамически добавив его как type="date"...:)

Надеюсь, что это кому-то полезно.

Ответ 2

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 и обеспечения резервных копий

Ответ 3

Вы можете просто удалить тип "date" и переключить его на "text", как в следующем скрипте: удачи jsfiddle

removeDefaultDate = function(){
    $('input[type=date]').each(function(){
        this.type="text";
    });
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}

Ответ 4

У меня была аналогичная проблема. В моей модели /viewmodel я указал тип данных как DataType.Date Я заметил, что когда я удалил это, сборщик дат начал работать в Chrome. Я думаю, что попытался изменить тип данных как DataType.DateTime и снова попытался в chrome. Это решило проблему. Не уверен, что это относится ко всем, но это вызвало у меня много головной боли, поэтому это может помочь кому-то. Это работало в MVC4 с использованием jqueryUI 1.8.20

Ответ 5

Он то, что я обычно использую. У меня есть несколько различных форматов используемого 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>

Ответ 6

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();