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

Réponses:

140

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;
}
— Yacine Zalouani
source
3
:: - webkit-input-placeholder ne masquera pas le texte "mm / jj / aaaa" car ce n'est pas un espace réservé, il est contrôlé nativement.
— Justin Bull
1
Il vous manque également un sélecteur. Pour référence: stackoverflow.com/a/11418704/229787
— Justin Bull
Pour autant que je sache,
— Seb Charrot
54

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');
— rjmunro
source
5
Facilement ma solution préférée. Il est simple et n'implémente pas de sélecteurs CSS spécifiques au navigateur. Le résultat attendu, IMO, devrait être d'empêcher le contrôle natif si JavaScript est activé, ce qui permet un sélecteur de date personnalisé. Cependant, si JavaScript est désactivé, les contrôles natifs fonctionnent toujours. Honnêtement, cela devrait être la réponse acceptée.
— Justin Bull
2
@ travesty3 est-ce que ces versions d'IE prennent en charge les sélecteurs de date html5, ou reviennent-elles simplement au texte? Sinon, cela n'a pas d'importance.
— rjmunro
2
Je ne comprends pas pourquoi utiliser <input type = "date"> pour un champ de date en fait un mauvais usage? (première phrase de cette réponse)
— Steve
3
Il est parfaitement valable de ne pas vouloir de sélecteur de date de calendrier pour un champ comme Date de naissance, mais de vouloir toujours que le champ soit validé par le navigateur natif.
— Duncanmoo
1
@Duncanmoo Quelle est la particularité des dates de naissance? Définissez simplement le maximum sur aujourd'hui (si vous souhaitez autoriser l'entrée des bébés le jour de leur naissance), ou il y a N ans où N est l'âge minimum pour les utilisateurs de votre site. Surtout sur mobile, je préfère utiliser le sélecteur de date natif du navigateur pour saisir ma date de naissance plutôt que quelque chose de JS personnalisé. De plus, combien d'implémentations de sélecteur de date JS personnalisées ne prennent pas en charge la validation?
— rjmunro
15

Vous pouvez utiliser:

jQuery('input[type="date"]').live('click', function(e) {e.preventDefault();}).datepicker();
— Jimbo
source
3
si vous utilisez jQuery> = 1.7:jQuery('input[type="date"]').on('click', function(e) {e.preventDefault();}).datepicker();
— yorch
Cette réponse ne supprime pas le style natif. stackoverflow.com/a/11418704/229787
— Justin Bull
4
@JustinBull est vrai, mais la question n'était pas de supprimer le style, mais de permettre l'utilisation du sélecteur de date jQuery à la place, ce que cette réponse réalise. Avez-vous des idées sur la façon dont le style peut également être supprimé?
— Jimbo
7

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();
}
— CodeFinity
source
3
C'est assez utile pour revenir à jQuery datepicker lorsqu'un datepicker natif n'est pas disponible. Cependant, cette question semble concerner la suppression du sélecteur de dates de Chrome, j'ai donc rejeté votre réponse.
— Sam
7

Cela a fonctionné pour moi

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

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)

— MartijnR
source
1

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="">
— ebelendez
source
3
Si vous souhaitez ajouter des attributs personnalisés pour les données de script local, la méthode valide consiste à utiliser des data-*attributs . Dans ce cas, appelez votre attribut data-plugau lieu de plug, il est alors garanti de ne jamais entrer en conflit avec un nouvel attribut ajouté dans HTML6 / 7/8 / etc.
— robertc
1

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

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.

— Cogitateur
source
0

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

— Jeff Tian
source
0

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.

— Philip Stratford
source
0

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');
— Mathieu Dierckx
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.