DatePicker changer la couleur case des jours

**Pelote2012** · 03/05/2013, 13h41

Bonjour,

Toujours dans ma recherche sur les calendriers ...

J'ai trouvé sur le site officiel de jquery UI comment faire proprement une sélection d'une plage de date.

Maintenant, sur mes dates, je dois changer la couleur suivant que la date est réservée ou pas (infos que j'ai en base et que je sais comment ramener sur la page client)

Est-ce que quelqu'un à une idée?

Voici mon code

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
 
</title>
    <script type="text/javascript" src="/Scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/Scripts/jquery-ui-1.10.2.custom.min.js" ></script>
    <script type="text/javascript" src="/Scripts/ImgDefilante.js" language="jscript"></script>
    <script type="text/javascript" src="/Scripts/ModalPopupResult.js" ></script>
    <link href="/Styles/custom-theme/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css" /><link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/InitDatePicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#from").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 3,
                dateFormat: "DD, d MM, yy",
                minDate : 0,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#to").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 2,
                dateFormat: "DD, d MM, yy",
                minDate: 0,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                }
            });
        });
    </script>
</head>
<body>
    <form name="aspnetForm" method="post" action="Reservation.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1MjQ5ODA0NjlkZEp1fq1UECVowakqD3J1yPP39u2X" />
</div>
 
    <div>
        <div class="page">
            <div class="header">
                <div id="Login">
                    <img src="/Images/Flag/fr.png" id="flgFr" />&nbsp;
                    <img src="/Images/Flag/gb.png" id="FlgGb" />
                </div>
                <center>
                    <div id="bandeau" style="position: relative; width: 700px; height: 120px; overflow: hidden;">
                    </div>
                </center>
            </div>
            <div class="main">
                <br />
                <ul id="ctl00_NavigationMenu" class="menu_deroulant">
                    <li><a href="/Accueil.aspx" title="">Accueil</a></li>
                    <li><a href="/Client/Details.aspx" title="">Descriptif</a></li>
                    <li><a href="/Client/Loisir.aspx" title="">Loisirs et activités</a></li>
                    <li><a href="/Client/Reservation.aspx" title="">Tarifs et disponibilités</a></li>
                    <li><a href="/Client/Localisation.aspx" title="">Localisation</a></li>
                </ul>
 
    <div>
        <div style="float: left;">
            <center>
                <strong class="TxtAppart">Tarifs</strong></center>
            <br />
            <center>
                <table>
                    <tr class="Ligne">
                        <td align="left">
                            Haute saison
                        </td>
                        <td>
                            du 01/01/2013
                        </td>
                        <td>
                            au 30/04/2013
                        </td>
                        <td>
                            1200€
                        </td>
                    </tr>
                    <tr class="LigneAlt">
                        <td align="left">
                            Moyenne saison
                        </td>
                        <td>
                            du 01/05/2013
                        </td>
                        <td>
                            au 30/09/2013
                        </td>
                        <td>
                            1000€
                        </td>
                    </tr>
                    <tr class="Ligne">
                        <td align="left">
                            Basse saison
                        </td>
                        <td>
                            du 01/10/2013
                        </td>
                        <td>
                            au 31/12/2013
                        </td>
                        <td>
                            900€
                        </td>
                    </tr>
                </table>
            </center>
            <span id="ctl00_MainContent_lblTarif" class="TxtAppart"></span>
        </div>
    </div>
    <div style="float: right; width: 450px;">
        <center>
            <strong class="TxtAppart">Disponibilités</strong><br />
        </center>
        <br />
        <div>
            <div style="float: left;">
                <center>
                    <table>
                        <tr>
                            <td>
                                <input type="text" id="from" width="60" />
                            </td>
                            <td>
                                <input type="text" id="to" width="60" />
                            </td>
                        </tr>
                    </table>
                </center>
            </div>
        </div>
        <div class="clear">
        </div>
        <br />
        <br />
    </div>
 
            </div>
            <div class="clear">
            </div>
            <br />
        </div>
        <div class="footer">
            <a id="ctl00_lnkAccueil" href="../Accueil.aspx">Accueil </a>-
            <a id="ctl00_lnkMentionLeg" href="../MentionLegale.aspx">Mentions légales </a>
            -
            <a id="ctl00_lnkContact" href="../Contact.aspx">Nous contacter
            </a>
        </div>
    </div>
    <div id="MsgBack" title="Download complete">
        <div class='subcontent-box' id='Errortitre'>
        </div>
    </div>
    </form>
</body>
</html>

**Pelote2012** · 03/05/2013, 15h04

J'ai trouvé se site ici
et celui là ici
Mais j'ai du mal à comprendre tout

Apparement il faut utiliser : beforeShowDay.
Faut que je creuse plus.
Si quelqu'un à un exemple qui marche, je suis toujours preneur

Je ne comprend pas trop pourquoi
sur le retour il y a des différence suivant les ex.

Code :

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

1
2
return [true, 'dateHighlight', '']
return [true, "Highlighted", Highlight]; //Highlight tableau de dates

et certains ne retourn qu'un tableau de 2 éléments

**Pelote2012** · 03/05/2013, 17h51

Ok j'ai compris explication

à noter que

Code css :

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

1
2
3
4
5
6
.Highlighted a:visited,.Highlighted a:link
{
    background-color: Red;
    background-image: none;
    color: White;
}

marche mieux

Je viens de voir que si je mets en retour false (non clickable)
Je n'arrive pas à changer la couleur (il n'y a plus de a mais un span à la place)
j'ai essayé

Code css :

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

1
2
3
4
5
6
.Highlighted span
{
    background-color: Red;
    background-image: none;
    color: White;
}

Quelqu'un peut me dire comment faire

**danielhagnoul** · 03/05/2013, 22h53

Personnaliser les dates n'est pas évident, on a déjà traité plusieurs fois de ce problème sur le forum.

Mon article et mes codes sont de 2009, j'envisage de les mettre à jour pour jQuery 2.0.0 et jQuery UI 10.X ou 11.0, mais ils sont toujours utilisables.

**Pelote2012** · 06/05/2013, 08h19

Merci pour ta réponse.

Ce qui est dans ton explication, je l'ai déjà mis en place.
Ce qui me manque est le sélecteur précis pour modifier le CSS d'une date "non cliquable" au lieu du <a> j'ai à la place un <span>
Cela se produit quand dans beforshowday je retourne false.

Merci d'avance, je n'ai pas encore trouvé

**danielhagnoul** · 06/05/2013, 20h59

Bonsoir

Dans mon exemple, pour les vacances (dates non sélectionnables), je me suis contenté de la couleur grise par défaut appliquée par result = [false, '', "On est en vacances !"];.

Mais il suffit d'appliquer le même principe, je viens de tester et cela fonctionne. Par contre il faut choisir une couleur plus sombre, orange ressort trop pâlichon.

Code css :

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

1
2
3
.vacances {
    /* rien, sert de marqueur pour color:orange; */
}

result = [false, 'vacances', "On est en vacances !"];.

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
$(window).load(function(){
	/*
	* Bricolage indispensable pour colorer les dates choisies
	* chaque fois que le datepicker se redessine !
	*/
	$("#datepicker").bind("mouseover", function(){
		if ($("td.important > a", this).eq(0).css("color") != "#FF0000") {
			$("td.important > a", this).css("color","#FF0000");
			$("td.lundiMercredi > a", this).css("color","#33CC00");
			$("td.reserver > a", this).css("color","#0033CC");
			$("td.vacances > span", this).css("color","orange");
		}
	});
 
	$("#datepicker").mouseover();
});	//fin window load

**Pelote2012** · 07/05/2013, 09h01

Je suis un peu surpris. Mais bon je suis en jquery 1.9.1

Code html :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Client.master"
    CodeBehind="Reservation.aspx.vb" Inherits="Guadeloup.Reservation" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="/Scripts/InitDatePicker.js"></script>
    <script type="text/javascript">
        $(function () {        
 
            var SelectedDates = <%= ser.Serialize(dtvdte)%>;
 
           $("#from").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 3,
                dateFormat: "DD, d MM, yy",
                minDate: 0,
                onClose: function (selectedDate) {
                    $("#to").datepicker("option", "minDate", selectedDate);
                },
                beforeShowDay: function (date) {
                   return Reservation(date,SelectedDates);
                }
            });
 
            $("#to").datepicker({
                defaultDate: "+1w",
                numberOfMonths: 2,
                dateFormat: "DD, d MM, yy",
                minDate: 0,
                onClose: function (selectedDate) {
                    $("#from").datepicker("option", "maxDate", selectedDate);
                },
                beforeShowDay: function (date) {
                   return Reservation(date,SelectedDates);
                }
            });
        });
 
        function Reservation(date,SelectedDates){
            var trouve = false;
            var row = 0;
            while (row< SelectedDates.length && !trouve) {
                var dte = SelectedDates[row].split("/"); 
                var d=Date.parse(date);
                trouve=(d >= Date.parse(dte[0]) && d <= Date.parse(dte[1]));
                row++;
            }
 
            if (trouve) {
                return [false, "Highlighted", "Réservé"]; // Si met false le CSS de remplacement n'est pas appliquer
            }
            else {
                return [true, '', ''];
            }
        }
 
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <div style="float: left;">
            <center>
                <strong class="TxtAppart">Tarifs</strong></center>
            <br />
            <center>
                <table>
                    <tr class="Ligne">
                        <td align="left">
                            Haute saison
                        </td>
                        <td>
                            du 01/01/2013
                        </td>
                        <td>
                            au 30/04/2013
                        </td>
                        <td>
                            1200€
                        </td>
                    </tr>
                    <tr class="LigneAlt">
                        <td align="left">
                            Moyenne saison
                        </td>
                        <td>
                            du 01/05/2013
                        </td>
                        <td>
                            au 30/09/2013
                        </td>
                        <td>
                            1000€
                        </td>
                    </tr>
                    <tr class="Ligne">
                        <td align="left">
                            Basse saison
                        </td>
                        <td>
                            du 01/10/2013
                        </td>
                        <td>
                            au 31/12/2013
                        </td>
                        <td>
                            900€
                        </td>
                    </tr>
                </table>
            </center>
            <asp:Label ID="lblTarif" runat="server" CssClass="TxtAppart"></asp:Label>
        </div>
    </div>
    <div style="float: right; width: 450px;">
        <center>
            <strong class="TxtAppart">Disponibilités</strong><br />
        </center>
        <br />
        <div>
            <div style="float: left;">
                <center>
                    <table>
                        <tr>
                            <td>
                                <input type="text" id="from" width="60" />
                            </td>
                            <td>
                                <input type="text" id="to" width="60" />
                            </td>
                        </tr>
                    </table>
                </center>
            </div>
        </div>
        <div class="clear">
        </div>
        <br />
        <br />
    </div>
</asp:Content>

Si je met true , mon css

Code css :

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

1
2
3
4
5
6
.Highlighted a:visited,.Highlighted a:link
{
    background-color: Red;
    background-image: none;
    color: White;
}

fonctionne correctement

C'est uniquement quand je mets false avec css

Code css :

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

1
2
3
4
5
6
.Highlighted span
{
    background-color: Red;
    background-image: none;
    color: White;
}

qui ne marche pas

**Pelote2012** · 07/05/2013, 09h06

Bougé pas je viens de trouver, tu pourras utilier mon post pour refaire ton cours Daniel

réponse trouvé sur ici

Code css :

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

1
2
3
4
5
6
.ui-datepicker-unselectable.ui-state-disabled span.ui-state-default
{
    background-color: Red;
    background-image: none;
    color: White;
}

ça marche à moitié car maintenant tous les non cliquables sont modifiés. Moi j'aimerai que seul les jours réservés soient changé de couleur

**Pelote2012** · 07/05/2013, 09h31

Code css :

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

1
2
3
4
5
6
.Highlighted span.ui-state-default
{
    background-color: Red;
    background-image: none;
    color: White;
}

maintenant ça marche nickel

DatePicker changer la couleur case des jours [UI]

jQuery

Discussions similaires

Partager

Partager