web-dev-qa-db-fra.com

Désactiver Datepicker natif dans Google Chrome

Le sélecteur de date a atterri sur Chrome 20, existe-t-il un attribut quelconque pour le désactiver? Y a-t-il un attribut tag?

htmlhtml5google-chromedatepicker
87
Alexandre

Pour cacher la flèche:

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

Et pour cacher l'invite:

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

Si vous avez mal utilisé <input type="date" />, vous pouvez probablement utiliser:

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

après avoir chargé pour les transformer en entrées de texte. Vous devez d'abord attacher votre datepicker personnalisé:

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

Ou vous pouvez leur donner un cours:

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

Vous pouvez utiliser:

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

Avec Modernizr ( http://modernizr.com/ ), il peut vérifier cette fonctionnalité. Ensuite, vous pouvez le lier au booléen, il retourne:

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

Cela a fonctionné pour moi

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

Le code ci-dessus ne définit pas la valeur de l'élément input ni ne déclenche un événement change. Le code ci-dessous fonctionne dans Chrome et Firefox (non testé dans les autres navigateurs):

$('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 est une méthode simple et personnalisée permettant de compléter les chaînes avec des zéros (obligatoire)

2
MartijnR

J'utilise ce qui suit (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()

qui est converti en 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);
1
Paolo Dona

Je suis d’accord avec Robertc, le mieux est de ne pas utiliser type = date mais mon plugin JQuery Mobile Datepicker l’utilise. Je dois donc faire quelques changements:

J'utilise jquery.ui.datepicker.mobile.js et j'ai apporté les modifications suivantes:

De (ligne 51)

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

à

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

et dans le formulaire use, tapez text et ajoutez le plug var:

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

Pour Laravel5 Depuis on utilise 

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

=> Chrome va forcer son sélecteur de date . => Si vous l'enlevez avec css, vous obtiendrez les erreurs de formatage habituelles !! ".)

SOLUTION:

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

Je sais que c’est une vieille question maintenant, mais j’ai atterri ici pour chercher des informations à ce sujet afin que d’autres puissent également le faire.

Vous pouvez utiliser Modernizr pour déterminer si le navigateur prend en charge les types de saisie HTML5, tels que "date". Si tel est le cas, ces contrôles utiliseront le comportement natif pour afficher des éléments tels que datepickers. Si ce n'est pas le cas, vous pouvez spécifier le script à utiliser pour afficher votre propre datepicker. Fonctionne bien pour moi!

J'ai ajouté jquery-ui et Modernizr à ma page, puis j'ai ajouté le code suivant:

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

Cela signifie que le datepicker natif est affiché dans Chrome et celui de jquery-ui dans IE.

0
Philip Stratford

Cela fonctionne pour moi:

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

Voir également:

Comment désactiver la nouvelle entrée de date Chrome HTML5?

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

0
Jeff Tian