it-swarm.com.de

Deaktivieren Sie systemeigenes Datumsauswahl in Google Chrome

Datumsauswahl ist auf Chrome 20 gelandet, gibt es ein Attribut, um es zu deaktivieren? Mein gesamtes System verwendet jQuery UI datepicker und seinen Crossbrowser. Ich möchte also Chrome native Datepicker deaktivieren. Gibt es ein Tag-Attribut?

87
Alexandre

Den Pfeil ausblenden:

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

Und um die Aufforderung zu verbergen:

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

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

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

nachdem sie geladen wurden, werden sie in Texteingaben umgewandelt. 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');
48
rjmunro

Du könntest benutzen:

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

Mit Modernizr ( http://modernizr.com/ ) kann diese Funktionalität überprüft werden. Dann können Sie es an den booleschen Wert binden, den es zurückgibt:

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

Das hat bei mir funktioniert

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

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 Zeichenfolgen mit Nullen (erforderlich).

2
MartijnR

Ich verwende folgendes (Kaffeescript):

$ ->
  # disable chrome's html5 datepicker
  for datefield in $('input[data-datepicker=true]')
    $(datefield).attr('type', 'text')
  # enable custom datepicker
  $('input[data-datepicker=true]').datepicker()

was wird in einfaches Javascript konvertiert:

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

Ich stimme mit Robertc überein. Am besten verwenden Sie nicht type = date, aber mein JQuery Mobile Datepicker-Plugin verwendet es. Also muss ich einige Änderungen vornehmen:

Ich verwende jquery.ui.datepicker.mobile.js und habe diese Ä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 Formular use Text ein und fügen Sie den Var-Plug hinzu:

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

Für Laravel5 Da verwendet man 

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

=> Chrome erzwingt seinen Datepicker . => Wenn Sie es mit css wegnehmen, werden die üblichen Formatierungsfehler angezeigt. !! (Der angegebene Wert stimmt nicht mit dem erforderlichen Format überein ".)

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

Ich weiß, dass dies jetzt eine alte Frage ist, aber ich bin gerade hier gelandet, um Informationen darüber zu suchen, also vielleicht auch jemand anderes.

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

Ich habe jquery-ui und Modernizr zu meiner Seite 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 angezeigt wird und der Jquery-Ui im IE.

0

Das funktioniert für mich:

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

0
Jeff Tian