Désactiver le datepicker natif dans Google Chrome

Date picker a atterri sur Chrome 20, y a-t-il un atsortingbut pour le désactiver? Tout mon système utilise le dater de l’interface utilisateur de jQuery et son crossbrowser. Je souhaite donc désactiver le datpicker natif de Chrome. Y a-t-il un atsortingbut tag?

Pour masquer la flèche:

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

Et pour cacher l’invite:

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

Si vous avez mal utilisé vous pouvez probablement utiliser:

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

après ils ont chargé de les transformer en entrées de texte. Vous devrez d’abord attacher votre datepicker personnalisé:

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

Ou vous pourriez leur donner une classe:

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

Vous pouvez utiliser:

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

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

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

Cela a fonctionné pour moi

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

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

 $('input[type="date"]').click(function(e){ e.preventDefault(); }).datepicker({ onSelect: function(dateText){ var d = new Date(dateText), dv = d.getFullYear().toSsortingng().pad(4)+'-'+(d.getMonth()+1).toSsortingng().pad(2)+'-'+d.getDate().toSsortingng().pad(2); $(this).val(dv).sortinggger('change'); } }); 

pad est une méthode Ssortingng simple et personnalisée pour insérer des chaînes avec des zéros (obligatoire)

Je suis d’accord avec Robertc, le meilleur moyen 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 a 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 utilisez, tapez du texte et ajoutez le plug var:

  

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

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

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 puis-je désactiver la nouvelle entrée de date HTML5 de Chrome?

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

Je sais que c’est une vieille question maintenant, mais je viens juste de débarquer ici à la recherche d’informations à ce sujet, alors quelqu’un d’autre pourrait le faire.

Vous pouvez utiliser Modernizr pour détecter si le navigateur prend en charge les types de saisie HTML5, tels que «date». Si c’est le cas, ces contrôles utiliseront le comportement natif pour afficher des éléments tels que les datepickers. Si ce n’est pas le cas, vous pouvez spécifier quel script doit être utilisé pour afficher votre propre datepicker. Fonctionne bien pour moi!

J’ai ajouté jquery-ui et Modernizr à ma page, puis ajouté ce code:

  

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

Pour Laravel5 Depuis on utilise

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

=> Chrome va forcer son datepicker. => si vous l’enlevez avec css, vous obtiendrez les erreurs de formatage habituelles !! (La valeur spécifiée n’est pas conforme au format requirejs, “aaaa-MM-jj”.)

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