Discussion :

[olivxii]

Bonjour,

je travail sur un calendrier cliquable.

je part de ce script en html/js/css

je souhaite rendre cliquable la date sélectionnée pour rediriger dans une requête php.

n'ayant pas de connaissance en js j'aurais besoins de conseils.

voici les codes complets : https://codepen.io/puny-d/pen/RwjQBo

merci de votre aide

[licardentaistor]

yo,

tu as la méthode clickDay donc tu peux rajouter un appel Ajax

soit en JS pur ou en utilisant Jquery ou rediriger vers une page PHP avec document.location.href='http://tonsite/tapage.php'

[olivxii]

merci,

est il possible de faire passer en méthode GET juste le jour et le mois sélectionné ?

si je clique sur le 14 du moi de mars quand je récupère cette donnée sur la même page que le calendrier et ainsi pouvoir la transformer en variable.

le problème est de savoir ou placer cette fonction.

merci

[licardentaistor]

dans la méthode clickDay, tu peux faire une requête GET tu as tout ce qu'il faut:

Code javascript :

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
   Calendar.prototype.clickDay = function(o) {
        var selected = document.getElementsByClassName("selected"),
            len = selected.length;
        if(len !== 0){
            selected[0].className = "";
        }
        o.className = "selected";
        selectedDay = new Date(year, month, o.innerHTML);
        this.drawHeader(o.innerHTML);
        this.setCookie('selected_day', 1);
 
$.ajax({
  url: "monphp.php",
  data: {"mois" : month , "jour": o.innerHTML , "annee": year},
  dataType: "text"
});
 
    };

[olivxii]

Je suis franchement mauvais en JS

j'ai fais comme ca :

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
    Calendar.prototype.clickDay = function(o) {
        var selected = document.getElementsByClassName("selected"),
            len = selected.length;		
        if(len !== 0){
            selected[0].className = "";
        }
        o.className = "selected";
        selectedDay = new Date(year, month, o.innerHTML);
        this.drawHeader(o.innerHTML);
        this.setCookie('selected_day', 1);
 
        $.ajax({
        url: "calend.php",
        type: 'GET',
        data: {"mois" : month , "jour": o.innerHTML , "annee": year},
        dataType: "text",
         });
    };

comment je recupere le text ? avec un echo

merci

[licardentaistor]

un echo dans le php oui ,

et dans le JS dans la fonction Ajax:

Code JS :

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

1
2
3
4
5
 
        success: function (madate) {
            // Je charge les données dans box
            alert(madate);
        }

[olivxii]

il ne se passe rien.

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
    Calendar.prototype.clickDay = function(o) {
        var selected = document.getElementsByClassName("selected"),
            len = selected.length;		
        if(len !== 0){
            selected[0].className = "";
        }
        o.className = "selected";
        selectedDay = new Date(year, month, o.innerHTML);
        this.drawHeader(o.innerHTML);
        this.setCookie('selected_day', 1);
 
        $.ajax({
        url: "calend.php",
        type: 'GET',
        data: {"mois" : month , "jour": o.innerHTML , "annee": year},
        dataType: "text",
 
		success: function (data) {
            // Je charge les données dans box
			window.location.pathname = "calend.php"+"?annee="+year+"&mois="+month+"jour="+o.innerHTML;
            alert(data);
        }
         });
    };

merci

[licardentaistor]

il faut importer la lib jquery, quelles erreurs dans la console ?

[olivxii]

ca fonctionne sauf que quand je clique sur une date

cela m'affiche un popup qui affiche la page de redirection cal1.php et si je clique sur ok j'arrive sur la page cal1.php

de plus le mois est affiché avec un mois de retard, le reste est ok

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
        Calendar.prototype.clickDay = function(o) {
        var selected = document.getElementsByClassName("selected"),
            len = selected.length;		
        if(len !== 0){
            selected[0].className = "";
        }
        o.className = "selected";
        selectedDay = new Date(year, month, o.innerHTML);
        this.drawHeader(o.innerHTML);
        this.setCookie('selected_day', 1);
 
        $.ajax({
        url: "cal1.php",
        type: 'GET',
        data: {"mois" : month , "jour": o.innerHTML , "annee": year},
        dataType: "text",
 
		success: function (data) {
            // Je charge les données dans box
			document.location = "cal1.php?annee="+year+"&mois="+month+"&jour="+o.innerHTML; 
            alert(data);
        }
         });
    };

edit : pour la popup j'ai retiré : alert(data);

mais toujours ce decalage d'un mois

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
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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
document.addEventListener('DOMContentLoaded', function(){
    var today = new Date(),
        year = today.getFullYear(),
        month = today.getMonth(),
        monthTag =["Janvier","Fevrier","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Decembre"],
        day = today.getDate(),
        days = document.getElementsByTagName('td'),
        selectedDay,
        setDate,
        daysLen = days.length;
// options should like '2014-01-01'
    function Calendar(selector, options) {
        this.options = options;
        this.draw();
    }
 
    Calendar.prototype.draw  = function() {
        this.getCookie('selected_day');
        this.getOptions();
        this.drawDays();
        var that = this,
            reset = document.getElementById('reset'),
            pre = document.getElementsByClassName('pre-button'),
            next = document.getElementsByClassName('next-button');
 
            pre[0].addEventListener('click', function(){that.preMonth(); });
            next[0].addEventListener('click', function(){that.nextMonth(); });
            reset.addEventListener('click', function(){that.reset(); });
        while(daysLen--) {
            days[daysLen].addEventListener('click', function(){that.clickDay(this); });
        }
    };
 
    Calendar.prototype.drawHeader = function(e) {
        var headDay = document.getElementsByClassName('head-day'),
            headMonth = document.getElementsByClassName('head-month');
 
            e?headDay[0].innerHTML = e : headDay[0].innerHTML = day;
            headMonth[0].innerHTML = monthTag[month] +" - " + year;        
     };
 
 
 
    Calendar.prototype.drawDays = function() {
        var startDay = new Date(year, month, 1).getDay(),
//      下面表示这个月总共有几天
            nDays = new Date(year, month + 1, 0).getDate(),
 
            n = startDay;
//      清除原来的样式和日期
        for(var k = 0; k <42; k++) {
            days[k].innerHTML = '';
            days[k].id = '';
            days[k].className = '';
        }
 
        for(var i  = 1; i <= nDays ; i++) {
            days[n].innerHTML = i; 
            n++;
        }
 
        for(var j = 0; j < 42; j++) {
            if(days[j].innerHTML === ""){
 
                days[j].id = "disabled";
 
            }else if(j === day + startDay - 1){
                if((this.options && (month === setDate.getMonth()) && (year === setDate.getFullYear())) || (!this.options && (month === today.getMonth())&&(year===today.getFullYear()))){
                    this.drawHeader(day);
                    days[j].id = "today";
                }
            }
            if(selectedDay){
                if((j === selectedDay.getDate() + startDay - 1)&&(month === selectedDay.getMonth())&&(year === selectedDay.getFullYear())){
                days[j].className = "selected";
                this.drawHeader(selectedDay.getDate());
                }
            }
        }
    };
 
        Calendar.prototype.clickDay = function(o) {
        var selected = document.getElementsByClassName("selected"),
            len = selected.length;		
        if(len !== 0){
            selected[0].className = "";
        }
        o.className = "selected";
        selectedDay = new Date(year, month, o.innerHTML);
        this.drawHeader(o.innerHTML);
        this.setCookie('selected_day', 1);
 
        $.ajax({
        url: "cal1.php",
        type: 'GET',
        data: {"mois" : month, "jour": o.innerHTML , "annee": year},
        dataType: "text",
 
		success: function (data) {
            // Je charge les données dans box
			window.location.href  = "cal1.php?annee="+year+"&mois="+month+"&jour="+o.innerHTML; 
 
        }
         });
    };
 
    Calendar.prototype.preMonth = function() {
        if(month < 1){ 
            month = 11;
            year = year - 1; 
        }else{
            month = month - 1;
        }
        this.drawHeader(1);
        this.drawDays();
    };
 
    Calendar.prototype.nextMonth = function() {
        if(month >= 11){
            month = 0;
            year =  year + 1; 
        }else{
            month = month + 1;
        }
        this.drawHeader(1);
        this.drawDays();
    };
 
    Calendar.prototype.getOptions = function() {
        if(this.options){
            var sets = this.options.split('-');
                setDate = new Date(sets[0], sets[1]-1, sets[2]);
                day = setDate.getDate();
                year = setDate.getFullYear();
                month = setDate.getMonth();
        }
    };
 
     Calendar.prototype.reset = function() {
         month = today.getMonth();
         year = today.getFullYear();
         day = today.getDate();
         this.options = undefined;
         this.drawDays();
     };
 
    Calendar.prototype.setCookie = function(name, expiredays){
        if(expiredays) {
            var date = new Date();
            date.setTime(date.getTime() + (expiredays*24*60*60*1000));
            var expires = "; expires=" +date.toGMTString();
        }else{
            var expires = "";
        }
        document.cookie = name + "=" + selectedDay + expires + "; path=/log/log.txt";
    };
 
 
 
 
    Calendar.prototype.getCookie = function(name) {
        if(document.cookie.length){
            var arrCookie  = document.cookie.split(';'),
                nameEQ = name + "=";
            for(var i = 0, cLen = arrCookie.length; i < cLen; i++) {
                var c = arrCookie[i];
                while (c.charAt(0)==' ') {
                    c = c.substring(1,c.length);
 
                }
                if (c.indexOf(nameEQ) === 0) {
                    selectedDay =  new Date(c.substring(nameEQ.length, c.length));
                }
            }
        }
    };
    var calendar = new Calendar();
 
 
 
}, false);

[licardentaistor]

oui c'est normal le premier mois commence à 0 : cf la doc https://developer.mozilla.org/fr/doc.../Date/getMonth

t'as juste à faire month + 1....

[olivxii]

oui je le fais dans mon resultat en GET.

Code :

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

$mois = $_GET['mois'] + 1 ;

Merci pour ton aide