Bug de l'affichage de datepicker

Version imprimable

1 pièce(s) jointe(s)

Bonjour, voila un jour que je me trouve face ce problème d'affichage de datepicker après avoir essayer de bidouiller dans tout les sens rien ne bouge. Quelqu'un aurait il une idée de l'origine du problème ?
Pièce jointe 353068
Mon jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function(){
       $( ".datepicker" ).datepicker({
		changeMonth: true,//this option for allowing user to select month
		changeYear: true, //this option for allowing user to select from year range  
 
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		dayNamesShort: ['Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.','Dim.'],
		dayNamesMin: ['L', 'M', 'M', 'J', 'V', 'S','D'],
		weekHeader: 'Sem.',
		dateFormat: 'dd/mm/yy'
    });
});

Mon

Code:

1
2
3
4
5
6
<div class="ligne_profile" id="dateAff">
    <div class="label">Date d'affectation</div>
    <div class="value_profile">
        <input type="text" name="date_affectation" class="datepicker" maxlength="10" size="10" pattern="^\d\d[-\/]{1}\d\d[-\/]{1}\d{4}$" required/>
    </div>
</div>

Mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*Datepicker*/
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
  background-image: none;
  background: #ff6849;
  color: #ffffff;
  max-width:10px;
  max-height:10px;
  min-height:10px;
  max-height:10px;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-image: none;
  background: #f8c77d;
  color: #ffffff;
  max-width:10px;
  max-height:10px;
  min-height:10px;
  max-height:10px;
}

Merci de vos réponse

15/03/2018, 16h08
servietsky416

Solution

Pour ceux qui rencontreraient ce problème vérifier la hiérarchie de vos styles pour les élémenst de <table> datepicker utilise des <td>
15/03/2018, 17h13
psychadelic

Citation:

Envoyé par servietsky416

Pour ceux qui rencontreraient ce problème, vérifier la hiérarchie de vos styles pour les éléments de <table> datepicker utilise des <td>

Un datePicker qui n'utiliserai pas un tableau pour afficher son calendrier, ce serait un peu ballot, non ?
mais encore pour que la grande Leçon que tu en à tiré puisse à nous aussi nous être utile, encore faudrait-il savoir de quel DatePicker tu parles, il en existe presque 4000, que sur Github, et c'est peut-être quelque chose de bizarre pour toi, mais c'est impossible de savoir de quoi tu parles réellement :roll:
https://github.com/search?utf8=%E2%9...tePicker&type=
17/03/2018, 15h53
servietsky416

Merci pour la pertinence de ce message, premièrement si j'avais su que datepicker utilise des éléments de table je n'aurais pas posté sur ce forum j'aurai trouvé la solution tout seul (ce qui a été finalement le cas et sans votre aide), deuxièmement j'utilise le datepicker définit par jquery ui (https://api.jqueryui.com/datepicker/) donc je ne vois pas comment je pourrais être plus clair ...
17/03/2018, 16h57
psychadelic

Citation:

Envoyé par servietsky416

deuxièmement j'utilise le datepicker définit par jquery ui (https://api.jqueryui.com/datepicker/) donc je ne vois pas comment je pourrais être plus clair ...

Oui, tu aurait été plus clair en indiquant que tu utilisais le Datepicker de jQuery-UI, parce que ce n'était en rien évident. :roll:

Cela t'aurait peut-être valu plus de réponses, quand à savoir que tu avais un conflit avec tes balises de Tables HTML, et au vu des éléments que tu fournissais, ça non plus on ne pouvait pas le deviner, reconnais-le ;) :?