IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

DatePicker changer la couleur case des jours [UI]


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut DatePicker changer la couleur case des jours
    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>

  2. #2
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    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

  3. #3
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    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

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre éprouvé
    Avatar de Pelote2012
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2008
    Messages
    925
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2008
    Messages : 925
    Billets dans le blog
    2
    Par défaut
    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é

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [WPF] Changer la couleur pour des controles obligatoires
    Par BenoitM dans le forum Windows Presentation Foundation
    Réponses: 20
    Dernier message: 21/09/2012, 08h41
  2. Changer la couleur des cases d'un DataGrid
    Par zebiloute dans le forum Contribuez
    Réponses: 0
    Dernier message: 28/12/2010, 19h29
  3. Changer la couleur des jours de mscal
    Par borislenium dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 15/06/2008, 18h53
  4. Changer la couleur des jours de mscal
    Par borislenium dans le forum VBA Access
    Réponses: 2
    Dernier message: 21/05/2008, 15h02
  5. Réponses: 4
    Dernier message: 26/07/2007, 13h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo