Deaktivieren Sie den nativen Datepicker in Google Chrome

Antworten:

139

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;
}
Yacine Zalouani
quelle
3
:: - Der Webkit-Eingabe-Platzhalter verbirgt den Text "MM / TT / JJJJ" nicht, da er kein Platzhalter ist, sondern nativ gesteuert wird.
Justin Bull
1
Außerdem fehlt Ihnen ein Selektor. Als Referenz: stackoverflow.com/a/11418704/229787
Justin Bull
Soweit ich das beurteilen
Seb Charrot
53

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');
rjmunro
quelle
5
Leicht meine Lieblingslösung. Es ist einfach und implementiert keine browserspezifischen CSS-Selektoren. Das beabsichtigte Ergebnis, IMO, sollte darin bestehen, das native Steuerelement zu verhindern, wenn JavaScript aktiviert ist, und eine benutzerdefinierte Datumsauswahl zu ermöglichen. Wenn JavaScript jedoch deaktiviert ist, funktionieren die nativen Steuerelemente weiterhin. Ehrlich gesagt sollte dies die akzeptierte Antwort sein.
Justin Bull
Ich glaube, dass einige (wenn nicht alle) Versionen von IE es Ihnen nicht erlauben, den Typ einer Eingabe zu wechseln. Sicher, diese Frage bezieht sich auf Chrome, aber man würde denken, dass man eine Konsistenz zwischen den Browsern haben möchte ...
Travesty3
2
@ travesty3 unterstützen diese IE-Versionen HTML5-Datepicker oder greifen sie einfach auf Text zurück? Wenn nicht, dann spielt es keine Rolle.
rjmunro
2
Ich verstehe nicht, warum die Verwendung von <input type = "date"> für ein Datumsfeld es missbraucht? (erster Satz dieser Antwort)
Steve
3
Es ist absolut gültig, keine Kalender-Datumsauswahl für ein Feld wie das Geburtsdatum zu wünschen, aber dennoch zu wollen, dass das Feld vom nativen Browser validiert wird.
Duncanmoo
15

Du könntest benutzen:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
Jimbo
quelle
3
Wenn Sie jQuery> = 1.7 verwenden:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
yorch
Diese Antwort entfernt das native Styling nicht. stackoverflow.com/a/11418704/229787
Justin Bull
4
@JustinBull stimmt, aber es ging nicht darum, das Styling zu entfernen, sondern stattdessen die Verwendung der jQuery-Datumsauswahl zu ermöglichen, die mit dieser Antwort erreicht wird. Irgendwelche Ideen, wie das Styling auch entfernt werden kann?
Jimbo
7

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();
}
CodeFinity
quelle
3
Dies ist sehr nützlich, um auf jQuery Datepicker zurückzugreifen, wenn kein nativer Datepicker verfügbar ist. Bei dieser Frage geht es jedoch anscheinend darum, die Datumsauswahl von Chrome loszuwerden. Daher habe ich Ihre Antwort abgelehnt.
Sam
7

Das hat bei mir funktioniert

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

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)

MartijnR
quelle
1

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="">
ebelendez
quelle
3
Wenn Sie benutzerdefinierte Attribute für lokale Skriptdaten hinzufügen mögen, ist die gültige Art und Weise zu verwenden data-*Attribute . In diesem Fall rufen Sie data-plugstattdessen Ihr Attribut auf plug. Es wird dann garantiert niemals mit einem neuen Attribut in Konflikt geraten, das in HTML6 / 7/8 / etc. Hinzugefügt wurde.
Robertc
1

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);
Paolo Dona
quelle
1

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.

Cogitator
quelle
0

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

Jeff Tian
quelle
0

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.

Philip Stratford
quelle
0

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');
Mathieu Dierckx
quelle