Deaktivieren Sie den nativen Datepicker in Google Chrome

Datumsauswahl auf Chrome 20 gelandet. Gibt es ein Attribut, um es zu deaktivieren? Mein gesamtes System verwendet den jQuery UI-Datepicker und dessen Crossbrowser. Daher möchte ich den nativen Chrome-Datepicker deaktivieren. Gibt es ein Tag-Attribut?

So verstecken Sie den Pfeil:

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

Und um die Eingabeaufforderung zu verbergen:

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

Wenn Sie missbraucht haben <input type="date" />, können Sie wahrscheinlich verwenden:

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

nachdem sie geladen wurden, um sie in Texteingaben umzuwandeln. Sie müssen zuerst Ihren benutzerdefinierten Datepicker anhängen:

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

Oder Sie könnten ihnen eine Klasse geben:

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

Du könntest benutzen:

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

Mit Modernizr ( http://modernizr.com/ ) kann diese Funktionalität überprüft werden. Dann können Sie es mit dem zurückgegebenen Booleschen Wert verknüpfen:

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

Das hat bei mir funktioniert

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

Der obige Code legt weder den Wert des Eingabeelements fest noch löst er ein Änderungsereignis aus. Der folgende Code funktioniert in Chrome und Firefox (nicht in anderen Browsern getestet):

$('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 ist eine einfache benutzerdefinierte String-Methode zum Auffüllen von Strings mit Nullen (erforderlich)

Ich stimme Robertc zu. Der beste Weg ist, nicht type = date zu verwenden, aber mein JQuery Mobile Datepicker-Plugin verwendet es. Also muss ich einige Änderungen vornehmen:

Ich verwende jquery.ui.datepicker.mobile.js und habe folgende Änderungen vorgenommen:

Von (Zeile 51)

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

zu

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

Geben Sie im Formulargebrauch Text ein und fügen Sie den var plug hinzu:

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

Ich benutze folgendes (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()

welches in einfaches Javascript konvertiert wird:

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

Das hat bei mir funktioniert:

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

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

Obwohl der Wert der Datumsfelder noch vorhanden und korrekt war, wurde er nicht angezeigt. Aus diesem Grund habe ich die Datumswerte aus meinem Ansichtsmodell zurückgesetzt.

Das funktioniert bei mir:

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

Siehe auch:

Wie kann ich die neue Chrome HTML5-Datumseingabe deaktivieren?

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

Ich weiß, dass dies jetzt eine alte Frage ist, aber ich bin gerade hier gelandet und habe nach Informationen darüber gesucht, damit es auch jemand anderes könnte.

Mit Modernizr können Sie feststellen, ob der Browser HTML5-Eingabetypen wie "Datum" unterstützt. Wenn dies der Fall ist, verwenden diese Steuerelemente das native Verhalten, um Dinge wie Datumsauswahl anzuzeigen. Wenn dies nicht der Fall ist, können Sie angeben, mit welchem ​​Skript Ihr eigener Datepicker angezeigt werden soll. Funktioniert gut für mich!

Ich habe meiner Seite jquery-ui und Modernizr hinzugefügt und dann diesen Code hinzugefügt:

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

Dies bedeutet, dass der native Datepicker in Chrome und der jquery-ui im ​​IE angezeigt wird.

Für Laravel5 Da benutzt man

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

=> Chrome erzwingt die Datumsauswahl. => Wenn Sie es mit CSS entfernen, erhalten Sie die üblichen Formatierungsfehler! (Der angegebene Wert entspricht nicht dem erforderlichen Format "JJJJ-MM-TT".)

LÖSUNG:

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