Discussion :

[dark0502]

Bonjour,

En fait, je viens de créer un datepicker jquery que j'ai un peu personnalisé avec des couleurs différentes dans plusieurs cases de jours comme vous pourrez le voir dans le code ci-dessous.

J'ai crée une taille pour le tableau, pour les lignes et pour les cellules. Les cellules(<td>) contiennent deux <div>(une pour la partie du dessus et une pour la partie du dessous). Le problème est visuel. En fait, je remarque que mes cellules(<td>) se colorisent bien de l'intérieur mais non sur leurs bords, leurs contours. De plus, la dernière bordure du tableau est un peu de travers. Je n'arrive pas à comprendre pourquoi.

Avez-vous une solution ?

merci
Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$("#date").datepicker(frenchOpts);
var date = new Date();
initDatePicker(date.getMonth()+1,date.getFullYear());
var height = 2.2;
var width = 2.2;
var unit = "em";
//rearrangement de la table
$("table").css("width", "" + (width*7) + unit);
$("table").css("height", "" + (height*5) + unit);
$("table").css("margin-left","0.8"+unit);
$("#date table tbody td a[class*=\"ui-state-active\"]").each(function(){
    $(this).removeClass('ui-state-active');
    $(this).removeClass('ui-state-highlight');
    $(this).removeClass('ui-state-hover');
});
$("table thead tr th").each(function() {
    $(this).css("width", "" + width + unit);
});
$("table td").each(function () {
    $(this).parent().css("width","" + (7*width) + unit);
    $(this).parent().css("height","" + height + unit);
    $(this).attr("onclick","");
    //$(this).css("position", "relative");
    $(this).css("width", "" + width + unit);
    $(this).css("height", "" + height + unit);
    $(this).css("border", "0.1" + unit+" solid black");
    $(this).append("<div style=\"background-color:white;vertical-align:bottom;height:"+(height/2)+unit+";width:+"+width+unit+";padding:0em 0em 0em 0em;\"></div>");
});
$("table td a").each(function () {
    $(this).css("font-size", "1.3"+unit);
    $(this).css("color", "black");
    $(this).css("text-align","center");
    $(this).removeClass("ui-state-default");
    $(this).removeClass("ui-state-hover");
    $(this).wrap("<div style=\"background-color:white;height:"+(height/2)+unit+";width:"+width+"em;vertical-align:top;padding:0em 0em 0em 0em;\"></div>");
});
var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';
$(selector).live('mouseover', function(){
    $(this).removeClass('ui-state-hover');
    if (this.className.indexOf('ui-datepicker-prev') != -1){
        $(this).removeClass('ui-datepicker-prev-hover');
    }
    if (this.className.indexOf('ui-datepicker-next') != -1){
        $(this).removeClass('ui-datepicker-next-hover');
    }
});

[danielhagnoul]

http://danielhagnoul.developpez.com/...datepicker.php