Hoe kan ik datums ouder dan vandaag grijs maken en niet clickable in deze kalender
Mensen kunnen hier een datum kiezen waarop hun product afgeleverd kan worden.
Graag zou ik zien dat vandaag en ouder dan vandaag niet clickable is en grijsgekleurd, maar ik kom er niet uit.
Om de datums allemaal gelijk te maken gebruik ik moments.js , dat werkt wel prima. Ik heb ook een alert die ervoor zorgt dat datums ouder dan vandaag niet clickable zijn maar dit is niet ideaal. Liever heb ik geen alert maar gewoon een niet clickable datum.
Hoe kan ik dat voor elkaar krijgen?
Mijn code:
Code (php)
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
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
tpj(document).ready(function () {
// Set date locale to NL
moment.locale('nl');
// Create calendar
tpj("#my-calendar").zabuto_calendar({
cell_border: true,
today: true,
show_days: true,
// Execute myDateFunction when a date is clicked
action: function ()
{
return myDateFunction(this.id, false);
},
weekstartson: 0,
language: "nl",
show_previous: true,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
// Post date through ajax and display date with PHP script that is returned
function myDateFunction(id) {
var date = tpj("#" + id).data("date");
var $tijdreken = moment(date).format('YYYY-MM-DD');
var $tijd = moment(date).format('D MMMM YYYY');
var $vandaag = moment().format('YYYY-MM-DD');
var bgcolor = tpj("#" + id).addClass( "activedate" );
var $leverdatum = $tijd;
var url = 'includes/cartoverzicht.php';
var posting = tpj.post( url, {
leverdatum: $leverdatum,
date: date
});
if(moment($tijdreken).isSameOrBefore($vandaag)){
alert('Kies een datum na die van vandaag');
tpj("#" + id).removeClass( "activedate" );
return false;
}else{
// Post to cartoverzicht.php
posting.done(function( returned ) {
tpj( "#cartresult" ).empty().append( returned );
tpj("#my-calendar").zabuto_calendar({
cell_border: true,
today: true,
show_days: true,
action: function ()
{
return myDateFunction(this.id, false);
},
weekstartson: 0,
language: "nl",
show_previous: true,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
// Add class for clicked date
tpj("#" + id).addClass( "activedate" );
});
}
}
});
// Set date locale to NL
moment.locale('nl');
// Create calendar
tpj("#my-calendar").zabuto_calendar({
cell_border: true,
today: true,
show_days: true,
// Execute myDateFunction when a date is clicked
action: function ()
{
return myDateFunction(this.id, false);
},
weekstartson: 0,
language: "nl",
show_previous: true,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
// Post date through ajax and display date with PHP script that is returned
function myDateFunction(id) {
var date = tpj("#" + id).data("date");
var $tijdreken = moment(date).format('YYYY-MM-DD');
var $tijd = moment(date).format('D MMMM YYYY');
var $vandaag = moment().format('YYYY-MM-DD');
var bgcolor = tpj("#" + id).addClass( "activedate" );
var $leverdatum = $tijd;
var url = 'includes/cartoverzicht.php';
var posting = tpj.post( url, {
leverdatum: $leverdatum,
date: date
});
if(moment($tijdreken).isSameOrBefore($vandaag)){
alert('Kies een datum na die van vandaag');
tpj("#" + id).removeClass( "activedate" );
return false;
}else{
// Post to cartoverzicht.php
posting.done(function( returned ) {
tpj( "#cartresult" ).empty().append( returned );
tpj("#my-calendar").zabuto_calendar({
cell_border: true,
today: true,
show_days: true,
action: function ()
{
return myDateFunction(this.id, false);
},
weekstartson: 0,
language: "nl",
show_previous: true,
nav_icon: {
prev: '<i class="fa fa-chevron-circle-left"></i>',
next: '<i class="fa fa-chevron-circle-right"></i>'
}
});
// Add class for clicked date
tpj("#" + id).addClass( "activedate" );
});
}
}
});
Met de documentatie van zabuto kom ik er niet uit.
Eigenlijk zou ik een array moeten hebben met alle datums tot 1 maand terug (want de zabuto kalender kan niet verder terug dan 1 maand volgens mijn instellingen) en voor elke datum moeten kijken of deze ouder is dan vandaag. Maar hoe kom ik aan zo'n array? Volgens hun documentatie lukt het me alleen om een specifieke datum op te halen na een action (click op een datum) maar eigenlijk moet ik zonder iets uit te voeren al de gehele maand in een array hebben..
Wie kan mij helpen.
Gewijzigd op 08/05/2018 10:19:43 door Snelle Jaap
Daarbij , waarom zabuto? Volgens mij heeft bijvoorbeeld de jquery datepicker functionaliteit om bijvoorbeeld bepaalde dagen van de week of dagen van of tot een datum inactief te maken.
In eerste instantie koos ik voor zabuto omdat ik een kalender wilde die gelijk te zien is en niet een datepicker in een inputveld maar ik zie nu dat die jquery datepicker ook een dergelijke optie heeft.
Is een poging wagen met die jquery datepicker.
