Вимкніть власний вибір дати в Google Chrome

Засіб вибору дати потрапив на Chrome 20, чи існує якийсь атрибут, який би його відключив? Вся моя система використовує jQuery UI datepicker, і це крос-браузер, тому я хочу відключити власний 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();

За допомогою 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 для заповнення рядків нулями (обов’язково)

Я згоден з Robertc, найкращий спосіб - не використовувати 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(){

а у формі використання введіть текст і додайте штекер var:

<input type="text" plug="date" name="date" id="date" value="">

Я використовую наступне (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, наприклад „дата“. Якщо це станеться, ці елементи керування використовуватимуть рідну поведінку для відображення таких речей, як вибору дати. Якщо цього не сталося, ви можете вказати, який скрипт слід використовувати для відображення вашого власного засобу вибору дати. Для мене добре працює!

Я додав 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>

Це означає, що рідна програма вибору дати відображається в Chrome, а jquery-ui - у IE.

Для Laravel5 Оскільки один використовує

{!! Form :: input ('date', 'date_start', null, ['class' => 'form-control', 'id' => 'date_start', 'name' => 'date_start']) !!}

=> Chrome примусить свій пристрій вибору дати. => якщо ви заберете його за допомогою css, ви отримаєте звичайні помилки форматування !! (Вказане значення не відповідає необхідному формату, "рррр-ММ-дд".)

РІШЕННЯ:

$ ('input [type = "date"]'). attr ('type', 'text');

$("#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');