Désactiver le sélecteur de date natif dans Google Chrome

Le sélecteur de date a atterri sur Chrome 20, y a-t-il un attribut pour le désactiver? Tout mon système utilise jQuery UI datepicker et son crossbrowser, donc, je souhaite désactiver le datpicker natif de Chrome. Y a-t-il un attribut de balise?

Pour masquer la flèche:

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

Et pour masquer l'invite:

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

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

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

après leur chargement pour les transformer en entrées de texte. Vous devrez d'abord attacher votre sélecteur de date personnalisé:

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

Ou vous pouvez leur donner un cours:

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

// does not trigger 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 et ne déclenche pas d'é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().toString().pad(4)+'-'+(d.getMonth()+1).toString().pad(2)+'-'+d.getDate().toString().pad(2);
        $(this).val(dv).trigger('change');
    }
});

pad est une méthode de chaîne personnalisée simple pour remplir les 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 j'ai apporté ces modifications:

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 du texte et ajoutez le plug var:

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

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 a fonctionné pour moi:

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

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

Même si la valeur des champs de date était toujours présente et correcte, elle ne s'affichait pas. C'est pourquoi j'ai réinitialisé les valeurs de date de mon modèle de vue.

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 Chrome HTML5?

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 d'atterrir ici à la recherche d'informations à ce sujet afin que quelqu'un d'autre puisse aussi.

Vous pouvez utiliser Modernizr pour détecter si le navigateur prend en charge les types d'entrée HTML5, tels que «date». Si tel est le cas, ces contrôles utiliseront le comportement natif pour afficher des éléments tels que les sélecteurs de date. 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é ce code:

<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 sélecteur de date natif est affiché dans Chrome et que celui de jquery-ui est affiché dans IE.

Pour Laravel5 Depuis qu'on utilise

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

=> Chrome forcera son sélecteur de date. => si vous le supprimez avec css, vous obtiendrez les erreurs de formatage habituelles !! (La valeur spécifiée n'est pas conforme au format requis, "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');