web-dev-qa-db-fra.com

Type de chrome = "date" et conflit entre le sélecteur de date jquery ui

J'ai une zone de saisie de type = "date", tout fonctionne bien dans IE mais dans la dernière version de Chrome, elle est accompagnée d'une visière, de la flèche vers le bas et d'un espace réservé de mm/jj/aaaa.

Dans Chrome, sur un clic de ce champ, Chrome ouvre un sélecteur de date et j’ai mappé le sélecteur de date de jquery ui pour mon utilisation d’application. Ces deux se heurtent comme indiqué ci-dessous:

enter image description here

RED show jquery ui date picker below chrome date picker

J'ai appliqué un correctif comme ci-dessous:

input[type="date"]::-webkit-calendar-picker-indicator{
    display:none;
    -webkit-appearance: none;
    margin: 0;
}
input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}
/** THIS DOESN'T WORK **/
input[type="date"]::-webkit-input-placeholder{
    display:none !important;
    -webkit-appearance: none !important;
        visibility: hidden !important;
}
/** THIS DOESN'T WORK **/

Après avoir ajouté le code ci-dessus, cela semble sage:

enter image description here

Le code ci-dessus cache la flèche et la flèche qui déclenche le sélecteur de date de Chrome. Mais il y a un problème, un espace réservé ('mm/jj/aaaa') est toujours présent pour le champ de saisie; Le sélecteur de date de jquery ui arrive bien, mais lorsque je sélectionne une date, l’espace réservé est toujours présent. 

Aucune valeur n'est définie dans cette zone de saisie.

Besoin de savoir comment supprimer cet espace réservé pour définir la valeur; le format de date que j'utilise pour l'application est également aaaa/mm/jj.

La version de Chrome est: Version 27.0.1448.0

Merci d'avance!!!

jqueryjquery-uigoogle-chromedatedatepicker
12
GOK

J'ai traité de manière délicate, j'ai mon champ de date comme type="text" et j'ai ajouté un attribut comme data-type="date"

Dans jquery, j'utilise un code pour remplacer dynamiquement type="text & data-type="date" par type="date", afin que le navigateur n'en fasse pas un champ de date lors du chargement, mais jpery ui datepicker est appelé car je l'ajoute dynamiquement sous la forme type="date"... :)

J'espère que c'est utile à quelqu'un .. 

12
GOK

Chrome 27 prend désormais en charge les types de champ datepicker (tout comme Opera le fait déjà)

Vous pouvez vérifier avec modernizr.js si le champ de date est pris en charge. Modernizr.inputtypes.date renvoie true si le champ de date est pris en charge par le navigateur.

Le code suivant définit le sélecteur de date de l'interface utilisateur JQuery uniquement si le champ de date n'est pas pris en charge:

<script src="modernizr.js"></script>
<script>Modernizr.load({
  test: Modernizr.inputtypes.date,
  nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'],
  complete: function () {
    $('input[type=date]').datepicker({
      dateFormat: 'yy-mm-dd'
    }); 
  }
});
</script>

Utilisation de Modernizr pour détecter les fonctionnalités HTML5 et fournir des solutions de repli

17
Maksym Kozlenko

Vous pouvez simplement supprimer le type de "date" et le remplacer par "text" comme dans le violon suivant: Bonne chance jsfiddle

removeDefaultDate = function(){
    $('input[type=date]').each(function(){
        this.type="text";
    });
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'});
}
4
Joe Nabeezy

J'avais un problème similaire. Dans mon modèle/modèle de vue, j'avais spécifié le type de données DataType.Date . J'ai remarqué que lorsque j'ai supprimé ce sélecteur de dates, le sélecteur de date a commencé à fonctionner dans Chrome. et essayé à nouveau en chrome. Cela a résolu le problème. Je ne sais pas si cela s'applique à quelqu'un d'autre, mais cela m'a causé beaucoup de maux de tête, donc cela pourrait aider quelqu'un. Cela a fonctionné dans MVC4 avec jqueryUI 1.8.20

1
Grayson

Il est ce que j'utilise habituellement. J'ai différents formats de datepicker que j'utilise, je ne le couvre donc pas pour toutes les entrées de date. Cependant, changer le sélecteur sur ce qui fonctionne le mieux pour vous.

<script src="{YourPathHere}modernizr.js"></script>
<script>
$(function () {//DOM ready code
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker
                $('.date-picker').datepicker(
                    {
                        showButtonPanel: true,
                        gotoCurrent: true,
                        changeMonth: true,
                        changeYear: true,
                        showAnim: 'slideDown'
                    }
                );
            }
});// END DOM Ready
</script>
0
Mike

Google a proposé un autre moyen de résoudre ce conflit que j'ai trouvé utile, au bas de cet article .

var isDateInputSupported = function(){
  var elem = document.createElement('input');
  elem.setAttribute('type','date');
  elem.value = 'foo';
  return (elem.type == 'date' && elem.value != 'foo');
}

if (!isDateInputSupported())  // or.. !Modernizr.inputtypes.date
  $('input[type="date"]').datepicker();
0
Ben Hill