Coloration cellule d'un tableau datepicker

Version imprimable

Bonjour,

Je viens vers vous car j'ai un soucis avec jQuery, je souhaite dans mes deux datepicker mettre des cellules d'un autre couleur depuis des dates stocké dans ma base de données, j'ai donc fais ma requête SQL que j'ai ensuite j'ai fais ça,

Code:

1
2
3
4
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent)){
        $tblDateEvent[]= array($qarray[0]);
}

Dans ma requête SQL j'ai formaté m'as date comme ceci,
DATE_FORMAT( colonne_date, '%Y,%m,%d' ).

Puis après j'ai mon code jQuery,

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
26
27
28
29
30
31
32
$(document).ready(function() {
        var tableau = '<?php json_encode($tblDateEvent) ?>';
        $("#datepicker2").datepicker({
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date){
                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();
                if($.inArray((m +1)+'-'+d+'-'+y, tableau) !== -1) {			
                    return [true, 'datepickerConsoDonDay'];
                }
                else{
                    return [true];
                }
            }
        });
        $("#datepicker1").datepicker({
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            onSelect: function(){
                if ($(this).val() !== '') {
                    $("#datepicker2").datepicker('option', 'minDate', $(this).val());
                }
            },
            onClose: function () {
                if ($(this).val() == '') {
                    $("#datepicker2").datepicker('option', 'minDate', null);
                }
            }
        });
});

Mon soucis c'est que beforeShowDate ne fonctionne pas, je pense que le tableau n'est pas bien formaté mais je ne sais pas comment faire. Tout les tutos que j'ai vu avais des tableaux déclarés en JS, donc je pense que c'est le tableau qui bloque...
Si vous pouviez m'aider à démêler tout ça, ça serais super.
Merci

Cordialement

28/02/2015, 19h45
-Rpass-

Bonjour,

comme tu dois le savoir json_encode te renvois la valeur d'une variable en JSON. Si la variable que tu souhaites encoder est un tableau indexé avec des indexpar défauts (0, 1, 2 etc..) alors ça te renvoi un tableau. Si ce sont des index autres (1, 2, 3 ... ou 'a', 'b', 'c') alors ça te renvoit un objet.Cf les exemple json_encode de cette page

Ensuite pour vérifier ce que contient ton objet tableau en jquery, affiche le dans la console (console.log()) et tu seras fixé
04/03/2015, 10h26
Invité
Tout à bord désolé de répondre si tard mais le weekend a été nécessaire pour me remettre sur ce travail avec l'esprit vidé.

Merci de ta réponse Rpass.

J'ai fais le console.log(), la console me dis qu'il ne renvois rien je ne comprend pas pourquoi.

La tableau en PHP contient ceci,
Code:

1 2 2015,02,14|2015,02,18|2015,02,19|2015,02,20|2015,02,27 
Ce que je comprend pas pourquoi le json_encode me crée un tableau vide, est-il mal formaté? Je ne comprends pas, merci de votre aide.

Cordialement
04/03/2015, 17h53
Darkaurora

Un petit truc qui me choque :)

Code:

var tableau = '<?php json_encode($tblDateEvent) ?>';

il manquerait pas un "echo" par hasard ?
05/03/2015, 10h55
Invité

Quelle cruche je fais, merci darkaurora.
Mais maintenant il me dis que le tableau est null... Le formatage des données est-il en cause?
05/03/2015, 14h05
Darkaurora
Déjà une bonne pratique lorsque tu passes des variables au JS c'est de toujours tester leurs existences:

Code:

var tableau = '<?php echo json_encode(!empty($tblDateEvent) ? $tblDateEvent : array()); ?>';

Bien maintenant il faut savoir que json_encode n'est pas infaillible si des données (clé ou valeur) ne sont pas encodés en UTF-8 par exemple il te retournera une erreur.

Pour être sur que la fonction json_encode n'a pas produit d'erreur utilise json_last_error dont la documentation et des exemples d'utilisation sont fournis sur la documentation officiel PHP ici : http://php.net/manual/fr/function.json-last-error.php

Maintenant il serait déjà judicieux d'afficher ce que contient ton tableau avant de le passer au JS, tu peux le faire de cette manière:
Code:

1 2 3 4 5 $dateEvent= mysql_query($reqDate); while ($qarray=mysql_fetch_array($dateEvent)){ $tblDateEvent[]= array($qarray[0]); } var_dump($tblDateEvent);
05/03/2015, 16h37
Invité
Citation:
Envoyé par Darkaurora

Maintenant il serait déjà judicieux d'afficher ce que contient ton tableau avant de le passer au JS, tu peux le faire de cette manière:

Code:

1 2 3 4 5 $dateEvent= mysql_query($reqDate); while ($qarray=mysql_fetch_array($dateEvent)){ $tblDateEvent[]= array($qarray[0]); } var_dump($tblDateEvent);
J'ai déjà vérifié si mon tableau contenait bien ce que je voulais, j'ai marqué le résultat dans mon poste 2 (sans les pipes)

Merci de ton aide je vais testé ce que tu m'as donné et je reviens vers toi
05/03/2015, 17h19
Invité
Voici le résultat du var_dump de mon tableau $tblDateEvent

array(6) { [0]=> string(10) "2015,02,14" [1]=> string(10) "2015,02,18" [2]=> string(10) "2015,02,19" [3]=> string(10) "2015,02,20" [4]=> string(10) "2015,02,27" [5]=> string(10) "2015,03,05" }

Et pour le json_last_error il ne me renvoi "Aucune Erreur"
La syntaxe en JS du test est-elle exacte?
Code:

1 2 var tableau = '<?php echo json_encode(!empty($tblDateEvent)? tblDateEvent:array()); echo json_last_error();?>';
05/03/2015, 17h36
Darkaurora
Nope!! Ne mets pas un echo json_last_error(); dans la partie JS ce n'est pas pratique et n'a donc aucun intérêt, de plus a ce niveau la tu ne peux que bousiller ce que tu souhaites récupérer avec json_encode.

Ma syntaxe est correcte si tu as du mal à la comprendre l'équivalent de: var tableau = '<?php echo json_encode(!empty($tblDateEvent)? tblDateEvent:array()); ?> est:
Code:

1 2 3 4 5 var tableau = <?php if (!empty($tblDateEvent)) { echo json_encode($tblDateEvent); } else { echo json_encode(array()); }
Peut tu essayer de faire un json_encode dans la partie PHP juste en dessous du var_dump ?
05/03/2015, 17h59
Invité

J'espère ne pas t'avoir froissé en demandant si le test était bon, je voulais dire si j'avais bien écrit le test.

Pour ce qui est du echo json_encode(!empty($tblDateEvent)? $tblDateEvent:array()); après le var_dump voici le résultat:

["2015,02,14","2015,02,18","2015,02,19","2015,02,20","2015,02,27","2015,03,05"]

Le formatage est bon?
05/03/2015, 18h20
Darkaurora

Non t'inquiète pas tu m'as pas froissé :roll: et pour ce qui est du formatage pour ma part je ne vois rien qui empêcherai que tu puisses passer tes données au JS

le console.log(tableau) est toujours égale à null ?

si oui l'erreur viens d'une autre partie de tes sources.
05/03/2015, 18h46
Invité

Le console.log() me renvoi [] ... Il a bien un tableau mais vide si j'ai bien compris?
05/03/2015, 19h25
Darkaurora

juste afin d'être certain si tu fais ça: var tableau = json_encode($tblDateEvent);D'ailleurs je viens de me rendre compte que j'ai oublié un "$" devant tblDateEvent dans la condition précédente vérifie si tu ne l'a pas recopié.

Bref si le console.log(tableau) te renvois [] c'est que tu réinitialises ta variable $tblDateEvent entre sa création et son encodage. Si console.log te renvois null c'est peut être que je suis mauvais :)

Citation:

Envoyé par Darkaurora

juste afin d'être certain si tu fais ça: var tableau = json_encode($tblDateEvent);

J'ai essayé tel qu'elle mais ça ne fonctionne pas...
Es-ce qu'il y a une importance sur l'emplacement du script JS par rapport au PHP? Car mon code est construit tel quel:

------
Code JS

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
$(document).ready(function() 
    {
        var tableau= <? json_encode(!empty($tblDateEvent)? $tblDateEvent:array());?>
        console.log(tableau);
        $("#datepicker2").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date)
            {
                var m = date.getMonth();
                var d = date.getDate();
                var y = date.getFullYear();
 
                if($.inArray((m +1)+'-'+d+'-'+y, tableau) !== -1) 
                {			
                    return [true, 'datepickerConsoDonDay'];
                }
                else
                {
                    return [true];
                }
            }
        });
 
        $("#datepicker1").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            onSelect: function()
            {
                if ($(this).val() !== '') 
                {
                    $("#datepicker2").datepicker('option', 'minDate', $(this).val());
                }
            },
            onClose: function () 
            {
                if ($(this).val() == '') 
                {
                    $("#datepicker2").datepicker('option', 'minDate', null);
                }
            }
        });
    });

PHP - requêtes sur les données

Code:

1
2
3
4
5
6
$dateEvent= mysql_query($reqDate);
while ($qarray=mysql_fetch_array($dateEvent))
{
        $tblDateEvent[]= $qarray[0];
}
var_dump($tblDateEvent);

PHP-HTML mise en forme des données.

Code:

1
2
3
<form class="frmPrintConsoDon" name="frmPrintConsoDon" method="POST" action="cafe.php">
                Du : <input type="text" name="dateDebut" id="datepicker1" readonly/> au <input type="text" name="dateFin" id="datepicker2" readonly/>&emsp;<input type="submit" name="valider" value="Valider"/>
</form>

------
Je crois que c'est mal placé pour le json_encode vu qu'il est dans les Code JS, ou faut-il le mettre pour qu'il m'encode correctement le tableau?

Bon je pense que je ne suis pas doué non plus :)

Structure normal de ta page:

PHP -> HTML et affichage PHP -> JS

Avant le block JS faire:
Code:

1 2 3 4 5 6 7 8 9 // Le code PHP et HTML est au dessus var_dump($tblDateEvent, json_encode($tblDateEvent)); <script type="text/javascript"> $(document).ready(function() { var tableau = <?php ECHO json_encode($tblDateEvent); ?>; console.log(tableau); // le reste de ton code JS });

06/03/2015, 13h25
Invité

Ce que j'ai fais c'est que j'ai mis le script avant le HTML et après le traitement des données donc ça fonctionne mon tableau est bien rempli, maintenant le soucis c'est que je n'arrive pas a changer la couleur des case qui correspondent au tableau, je ne vois pas pourquoi et la console ne me dit rien.

Je continue donc à chercher de mon coté mais si vous avez une piste je serais intéressé :)

Merci

Bon j'ai continué mes recherches mais je n'ai rien trouvé de concluant, rien ne fonctionne et je ne sait pas pourquoi...
Voici mon tableau tel qu'il est en JS:

[["2015,02,14"],["2015,02,18"],["2015,02,19"],["2015,02,20"],["2015,02,27"],["2015,03,05"]]

Et voici le code du script que j'ai changé le problème c'est que ça ne fonctionne pas....

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
$(document).ready(function() 
{
        var tableau = '<?php print json_encode(!empty($tblDateEvent)? $tblDateEvent:array());?>';
        console.log(tableau);
        $("#datepicker2").datepicker(
        {
            minDate: new Date($('input[name=dateMin]').val()),
            maxDate: new Date($('input[name=dateMax]').val()),
            beforeShowDay: function(date)
            {
                for (var j = 0; j < tableau.length; j++) 
                {
                    if (date.getMonth() === tableau[j][1] - 1 && date.getDate() === tableau[j][0] && date.getYear() === tableau[j][2])
                    {
                        return [true, 'datepickerConsoDonDay'];
                    }
                    else
                    {
                        return [true];
                    }
                }
            }
        });
}

Je commence à désespérer de ne pas voir les erreurs du code...

Merci de votre aide

Le problème c'est que tableau[j][1] est égal à 0 au quel tu soustrait -1 je ne sais pas ce que ça donne

Pour chaque élément dans ton tableau tu devrais utiliser split:
Code:

1 2 3 4 5 6 7 8 9 10 for (var j = 0; j < tableau.length; j++) { var arrDate = tableau[j].split(','); if (date.getMonth() === arrDate[1] - 1 && date.getDate() === arrDate[2] && date.getYear() === arrDate[0]) { return [true, 'datepickerConsoDonDay']; } else { return [true]; }
Je n'en suis pas sur à 1°°% tu devrais mettre des consoles log pour t'assurer de la validité des test et savoir ce que tu récupère respectivement dans date.getMonth() et arrDate[1]