Wyłącz natywny datepicker w Google Chrome

Selektor dat wylądował w Chrome 20, czy jest jakiś atrybut, aby go wyłączyć? Cały mój system używa datepicker jQuery UI i jest to crossbrowser, więc chcę wyłączyć natywny datepicker Chrome. Czy istnieje atrybut tagu?

Aby ukryć strzałkę:

input::-webkit-calendar-picker-indicator{
    display: none;
}

Aby ukryć monit:

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

Jeśli nadużyłeś <input type="date" />, prawdopodobnie możesz użyć:

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

po załadowaniu, aby przekształcić je w dane wejściowe. Najpierw musisz dołączyć niestandardowy DatePicker:

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

Lub możesz dać im zajęcia:

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

Możesz użyć:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();

Dzięki Modernizr ( http://modernizr.com/ ) może sprawdzić tę funkcjonalność. Następnie możesz powiązać go z wartością logiczną, którą zwraca:

// does not trigger in Chrome, as the date Modernizr detects the date functionality.
if (!Modernizr.inputtypes.date) { 
    $("#opp-date").datepicker();
}

To zadziałało dla mnie

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

Powyższy kod nie ustawia wartości elementu wejściowego ani nie uruchamia zdarzenia zmiany. Poniższy kod działa w Chrome i Firefox (nie testowano w innych przeglądarkach):

$('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 to prosta niestandardowa metoda typu String do wypełniania ciągów zerami (wymagane)

Zgadzam się z Robertcem, najlepiej nie używać type = date, ale moja wtyczka JQuery Mobile Datepicker to wykorzystuje. Muszę więc wprowadzić pewne zmiany:

Używam jquery.ui.datepicker.mobile.js i wprowadziłem następujące zmiany:

Od (wiersz 51)

$( "input[type='date'], input:jqmData(type='date')" ).each(function(){

do

$( "input[plug='date'], input:jqmData(plug='date')" ).each(function(){

aw formularzu użyj wpisz tekst i dodaj wtyczkę var:

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

Używam następujących (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()

który jest konwertowany do zwykłego 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);

To zadziałało dla mnie:

// Hide Chrome datetime picker
$('input[type="datetime-local"]').attr('type', 'text');

// Reset date values
$("#EffectiveDate").val('@Model.EffectiveDate.ToShortDateString()');
$("#TerminationDate").val('@Model.TerminationDate.ToShortDateString()');

Mimo że wartość pól daty nadal istniała i była poprawna, nie była wyświetlana. Dlatego zresetowałem wartości dat z mojego modelu widoku.

To działa dla mnie:

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

Zobacz też:

Jak mogę wyłączyć nowe wprowadzanie daty HTML5 w Chrome?

http://zizhujy.com/blog/post/2014/09/18/Add-date-picker-to-dynamically-generated-input-elements.aspx

Wiem, że to stare pytanie, ale właśnie wylądowałem tutaj, szukając informacji na ten temat, więc ktoś inny też może.

Możesz użyć Modernizr, aby wykryć, czy przeglądarka obsługuje typy danych wejściowych HTML5, takie jak „data”. Jeśli tak, te kontrolki będą używać natywnego zachowania do wyświetlania rzeczy, takich jak datepickers. Jeśli tak się nie stanie, możesz określić, jaki skrypt ma być używany do wyświetlania własnego DatePicker. U mnie dobrze działa!

Dodałem jquery-ui i Modernizr do mojej strony, a następnie dodałem ten kod:

<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>

Oznacza to, że natywny datepicker jest wyświetlany w Chrome, a jquery-ui w IE.

Dla Laravel5 Ponieważ używa się

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

=> Chrome wymusi wybór daty. => jeśli usuniesz to za pomocą css, otrzymasz typowe błędy formatowania !! (Podana wartość nie jest zgodna z wymaganym formatem „rrrr-MM-dd”).

ROZWIĄZANIE:

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

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