Выбор даты приземлился в Chrome 20, есть ли какой-либо атрибут, чтобы отключить его? Вся моя система использует jQuery UI datepicker и кроссбраузер, поэтому я хочу отключить собственный datepicker Chrome. Есть ли атрибут тега?
html
google-chrome
datepicker
Александр
источник
источник
Ответы:
Чтобы скрыть стрелку:
input::-webkit-calendar-picker-indicator{ display: none; }
И чтобы скрыть подсказку:
input[type="date"]::-webkit-input-placeholder{ visibility: hidden !important; }
источник
Если вы использовали неправильно,
<input type="date" />
вы, вероятно, можете использовать:$('input[type="date"]').attr('type','text');
после загрузки, чтобы превратить их в текстовые поля. Сначала вам нужно прикрепить свой собственный датпикер:
$('input[type="date"]').datepicker().attr('type','text');
Или вы можете дать им урок:
$('input[type="date"]').addClass('date').attr('type','text');
источник
Вы можете использовать:
jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
источник
jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
С помощью Modernizr ( http://modernizr.com/ ) он может проверить эту функциональность. Затем вы можете привязать его к возвращаемому логическому значению:
// does not trigger in Chrome, as the date Modernizr detects the date functionality. if (!Modernizr.inputtypes.date) { $("#opp-date").datepicker(); }
источник
Это сработало для меня
input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
источник
Приведенный выше код не устанавливает значение входного элемента и не запускает событие изменения. Приведенный ниже код работает в Chrome и Firefox (не тестировался в других браузерах):
$('input[type="date"]').click(function(e){ e.preventDefault(); }).datepicker({ onSelect: function(dateText){ var d = new Date(dateText), dv = d.getFullYear().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2); $(this).val(dv).trigger('change'); } });
pad - это простой настраиваемый метод String для заполнения строк нулями (обязательно)
источник
Я согласен с Робертом, лучший способ - не использовать type = date, но мой плагин JQuery Mobile Datepicker использует его. Поэтому мне нужно внести некоторые изменения:
Я использую jquery.ui.datepicker.mobile.js и внес следующие изменения:
От (строка 51)
$( "input[type='date'], input:jqmData(type='date')" ).each(function(){
к
$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){
и в форме use введите текст и добавьте var plug:
<input type="text" plug="date" name="date" id="date" value="">
источник
data-*
атрибутов . В этом случае вызовите свой атрибутdata-plug
вместоplug
, тогда он гарантированно никогда не будет конфликтовать с каким-либо новым атрибутом, добавленным в HTML6 / 7/8 / и т. Д.Я использую следующее (coffeescript):
$ -> # disable chrome's html5 datepicker for datefield in $('input[data-datepicker=true]') $(datefield).attr('type', 'text') # enable custom datepicker $('input[data-datepicker=true]').datepicker()
который преобразуется в простой javascript:
(function() { $(function() { var datefield, _i, _len, _ref; _ref = $('input[data-datepicker=true]'); for (_i = 0, _len = _ref.length; _i < _len; _i++) { datefield = _ref[_i]; $(datefield).attr('type', 'text'); } return $('input[data-datepicker=true]').datepicker(); }); }).call(this);
источник
Это сработало для меня:
// Hide Chrome datetime picker $('input[type="datetime-local"]').attr('type', 'text'); // Reset date values $("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()'); $("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');
Несмотря на то, что значение полей даты все еще было правильным, оно не отображалось. Вот почему я сбрасываю значения даты из моей модели представления.
источник
Это работает для меня:
; (function ($) { $(document).ready(function (event) { $(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) { var $this = $(this); $this.prop('type', 'text').datepicker({ showOtherMonths: true, selectOtherMonths: true, showButtonPanel: true, changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', showWeek: true, firstDay: 1 }); setTimeout(function() { $this.datepicker('show'); }, 1); }); }); })(jQuery, jQuery.ui);
Смотрите также:
Как отключить новый ввод даты в Chrome HTML5?
http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx
источник
Я знаю, что это старый вопрос, но я только что приземлился здесь в поисках информации об этом, чтобы кто-то другой тоже мог.
Вы можете использовать Modernizr, чтобы определить, поддерживает ли браузер типы ввода HTML5, такие как «дата». Если это так, эти элементы управления будут использовать собственное поведение для отображения таких вещей, как указатели даты. Если это не так, вы можете указать, какой сценарий следует использовать для отображения вашего собственного datepicker. У меня хорошо работает!
Я добавил на свою страницу jquery-ui и Modernizr, а затем добавил этот код:
<script type="text/javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(initDateControls); initDateControls(); function initDateControls() { //Adds a datepicker to inputs with a type of 'date' when the browser doesn't support that HTML5 tag (type=date)' Modernizr.load({ test: Modernizr.inputtypes.datetime, nope: "scripts/jquery-ui.min.js", callback: function () { $("input[type=date]").datepicker({ dateFormat: "dd-mm-yy" }); } }); } </script>
Это означает, что собственный datepicker отображается в Chrome, а jquery-ui - в IE.
источник
Для Laravel5 Поскольку используется
{!! Form :: input ('date', 'date_start', null, ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}
=> Chrome заставит свой datepicker. => если убрать его с помощью css, вы получите обычные ошибки форматирования !! (Указанное значение не соответствует требуемому формату «гггг-ММ-дд».)
РЕШЕНИЕ:
$ ('input [тип = "дата"]'). attr ('тип', 'текст');
$("#date_start").datepicker({ autoclose: true, todayHighlight: true, dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, viewMode: 'months' }); $("#date_stop").datepicker({ autoclose: true, todayHighlight: true, dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, viewMode: 'months' }); $( "#date_start" ).datepicker().datepicker("setDate", "1d"); $( "#date_stop" ).datepicker().datepicker("setDate", '2d');
источник