JQuery UI DatePicker ochtend/middag keuze ??
ik gebruik datepicker om vrije dagdelen te laten zien.
Dat gaat goed, dmv de juiste achtergond afbeelding (groen/rood) is in één keer te zien of ochtend en/of middag nog vrij is.
(eigenlijk is het groep 1 en/of groep 2. tijden zijn hier niet van belang)
Alleen moeten de mensen nu een dag kiezen en daarna moet ik ze nog apart vragen om bv checkbox aan te vinken voor dagdeel 1 of 2
Is er iets te verzinnen, iets te maken dat ze in 1 stap IN de kalender ochtend/middag kunnen aan klikken ?
bvd.
Wat moet er gebeuren met dat resultaat day / night (die je in onderstaande code in een alert krijgt)?
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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
// code, zie http://jqueryui.com/datepicker/
$(function() { // onLoad pagina
var dp = $( "#datepicker" ); // elementen cachen
dp.datepicker({ // initialiseren
beforeShow: function(input, inst) {
insertMessage(null);
}
});
});
// zie http://jsfiddle.net/M9Z7T/126/
function insertMessage(message) {
clearTimeout(insertMessage.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) {
$('#ui-datepicker-div').append('<div class="daynight"><input value="day" name="daynight" type="radio"> Day <input value="night" name="daynight" type="radio"> Night</div>');
// onClick toevoegen
$('.daynight>input').on('click', function() {
alert($(this).val()); // of doe hier iets nuttiger
});
}
else {
insertMessage.timer = setTimeout(insertMessage, 10);
}
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
// code, zie http://jqueryui.com/datepicker/
$(function() { // onLoad pagina
var dp = $( "#datepicker" ); // elementen cachen
dp.datepicker({ // initialiseren
beforeShow: function(input, inst) {
insertMessage(null);
}
});
});
// zie http://jsfiddle.net/M9Z7T/126/
function insertMessage(message) {
clearTimeout(insertMessage.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) {
$('#ui-datepicker-div').append('<div class="daynight"><input value="day" name="daynight" type="radio"> Day <input value="night" name="daynight" type="radio"> Night</div>');
// onClick toevoegen
$('.daynight>input').on('click', function() {
alert($(this).val()); // of doe hier iets nuttiger
});
}
else {
insertMessage.timer = setTimeout(insertMessage, 10);
}
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
dank voor je reactie,
je append de HTML gewoon aan/in de div !!!
Maarrr , dat stukje html heeft nu geen relatie met de, te kiezen, datum.
Terwijl bv. morgen alleen nog de ochtend vrij is, overmorgen juist alleen de middag.
misschien niet zo duidelijk gezegt,
maar dat is eigenlijk de bedoeling....
in de link vd dag die geklikt wordt info zetten..... ???
-----
Ik kan aan jouw beschrijving niet opmaken waar die dag/nacht moet komen; noch wat je er verder mee van plan bent.
Gewijzigd op 16/04/2013 16:03:42 door Kris Peeters
Maar per dag moeten ze dus alleen het nog vrije dagdeel kunnen kiezen .....
ad:
Waar de radio groep komt ... Ja in de datepicker is natuurlijk wel mooi
er zijn dus eigelijk 3 mogelijkheden (afgezien van VOL, dan is die dag inactief)
0/1 & 1/0 en 1/1
Hmmm . . . .
ik kan vanuit php natuurlijk een extra array meegeven die voor elke dag een 1 2 of 3 aangeeft
Maar ik zie zelf nog niet hoef je dat dan kan gebruiken . . .
Gewijzigd op 16/04/2013 16:13:03 door - Roland -
Wordt dat mee verwerkt in die datepicker kalender (Of wordt er bv. ergens een lijst in een <textarea> bijgehouden of zo?) ?
Die (groen/rood); heb je het over de dagen van de datepicker kalender?
Hoe is je dat gelukt? Toon eens code.
- Wat gebeurt er als een gebruiker een datum aanklikt?
De datum komt dan in <input type="text" id="datepicker" />. Wat dan? Gebeurt daar iets mee?
php haalt de lijst met beschikbaar op en zet die in js var
en dan
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
beforeShowDay: function(day) {
d=day.getDate();
m=day.getMonth()+1;
yy=day.getFullYear();
mydate=yy + '-'+ m + '-' + d
if ( $.inArray(mydate,beschikbaar)> -1 ) {
return [true, "open", "Deze datum is nog beschikbaar."]
} else {
return [false,"vrij","Voor deze datum kunt u niet (meer) boeken."]
}//if
}// beforD
d=day.getDate();
m=day.getMonth()+1;
yy=day.getFullYear();
mydate=yy + '-'+ m + '-' + d
if ( $.inArray(mydate,beschikbaar)> -1 ) {
return [true, "open", "Deze datum is nog beschikbaar."]
} else {
return [false,"vrij","Voor deze datum kunt u niet (meer) boeken."]
}//if
}// beforD
die open en vrij zijn dus css classen
Maar NU moeten we niet alleen WEL of GEEN datum hebben (in_array) maar dus 3 of 4 mogelijkheden . . . .
dat zal dus iig wel apaarte array worden !
ook dat kan gewoon maar om dat hier te gaan verwerken ..... ( ik ben niet heel sterk in JS :-(
Gewijzigd op 16/04/2013 16:26:53 door - Roland -
Kijk, hier al wat tussentijdse code.
Het gaat nu vooral om de data $beschikbaar, en hoe die getoond wordt in de kalender (dat kan met css uiteraard ook anders op beeld komen).
Kan je $beschikbaar op deze manier genereren in php?
Met een array van arrays kan je zonder probleem meerdere gegevens per dag coderen.
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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
<?php
// zie http://www.phphulp.nl/php/forum/topic/jquery-ui-datepicker-ochtendmiddag-keuze-/90279/
// beschikbare halve dagen voor js. Via JSON komen die in een formaat dat js rechtstreeks kan lezen als een object
$beschikbaar = array(
array(0,0), // eerste dag van de maand => 's ochtends niet beschikbaar, 's avonds niet beschikbaar
array(1,0), // tweede dag van de maand => 's ochtends beschikbaar, 's avonds niet beschikbaar
array(1,1),
array(0,1),
// ... enz.
);
$beschikbaar_json = json_encode($beschikbaar);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
/* als voorbeeld, een aantal classes */
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
.white {
background-color: white;
}
</style>
<script>
var beschikbaar = <?php echo $beschikbaar_json; ?>; // deze variabele is trouwens overal beschikbaar
// code, zie http://jqueryui.com/datepicker/
$(function() { // onLoad pagina
var dp = $( "#datepicker" ); // elementen cachen
dp.datepicker({ // initialiseren
beforeShow: function(input, inst) {
insertRadios(null);
}
});
});
// zie http://jsfiddle.net/M9Z7T/126/
// recursieve functie, die de tabel aanpast zodra ze zichtbaar is
function insertRadios(message) {
clearTimeout(insertRadios.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) {
$('#ui-datepicker-div').append('<div class="daynight"><input value="day" name="daynight" type="radio"> Day <input value="night" name="daynight" type="radio"> Night</div>');
// onClick toevoegen
$('.daynight>input').on('click', function() {
alert($(this).val()); // of doe hier iets nuttiger
});
// nu de kleuren aanpassen
colorDisplay();
}
else {
insertRadios.timer = setTimeout(insertRadios, 10);
}
}
// kleur geven aan de dagen
function colorDisplay() {
var cels = $("[data-handler=selectDay]");
cels.each(function (i) {
cels.eq(i).addClass(getColor(i));
});
}
// geeft de kleur (nu ja, de css class !!!) terug
function getColor(index) {
var color = beschikbaar[index];
if (color) {
if (color[0] == 0 && color[1] == 0) return 'white';
if (color[0] == 1 && color[1] == 0) return 'red';
if (color[0] == 0 && color[1] == 1) return 'orange';
if (color[0] == 1 && color[1] == 1) return 'green';
}
return '';
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
// zie http://www.phphulp.nl/php/forum/topic/jquery-ui-datepicker-ochtendmiddag-keuze-/90279/
// beschikbare halve dagen voor js. Via JSON komen die in een formaat dat js rechtstreeks kan lezen als een object
$beschikbaar = array(
array(0,0), // eerste dag van de maand => 's ochtends niet beschikbaar, 's avonds niet beschikbaar
array(1,0), // tweede dag van de maand => 's ochtends beschikbaar, 's avonds niet beschikbaar
array(1,1),
array(0,1),
// ... enz.
);
$beschikbaar_json = json_encode($beschikbaar);
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
/* als voorbeeld, een aantal classes */
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
.white {
background-color: white;
}
</style>
<script>
var beschikbaar = <?php echo $beschikbaar_json; ?>; // deze variabele is trouwens overal beschikbaar
// code, zie http://jqueryui.com/datepicker/
$(function() { // onLoad pagina
var dp = $( "#datepicker" ); // elementen cachen
dp.datepicker({ // initialiseren
beforeShow: function(input, inst) {
insertRadios(null);
}
});
});
// zie http://jsfiddle.net/M9Z7T/126/
// recursieve functie, die de tabel aanpast zodra ze zichtbaar is
function insertRadios(message) {
clearTimeout(insertRadios.timer);
if ($('#ui-datepicker-div .ui-datepicker-calendar').is(':visible')) {
$('#ui-datepicker-div').append('<div class="daynight"><input value="day" name="daynight" type="radio"> Day <input value="night" name="daynight" type="radio"> Night</div>');
// onClick toevoegen
$('.daynight>input').on('click', function() {
alert($(this).val()); // of doe hier iets nuttiger
});
// nu de kleuren aanpassen
colorDisplay();
}
else {
insertRadios.timer = setTimeout(insertRadios, 10);
}
}
// kleur geven aan de dagen
function colorDisplay() {
var cels = $("[data-handler=selectDay]");
cels.each(function (i) {
cels.eq(i).addClass(getColor(i));
});
}
// geeft de kleur (nu ja, de css class !!!) terug
function getColor(index) {
var color = beschikbaar[index];
if (color) {
if (color[0] == 0 && color[1] == 0) return 'white';
if (color[0] == 1 && color[1] == 0) return 'red';
if (color[0] == 0 && color[1] == 1) return 'orange';
if (color[0] == 1 && color[1] == 1) return 'green';
}
return '';
}
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
Gewijzigd op 16/04/2013 19:06:07 door Kris Peeters
geweldig je hebt daar al heel veel staan !!
grappig te zien dat je een heel ander aanpak heb dan ik. Maar dat is altijd wel heel leerzaam !
je gebruikt niet de "standaard" day mogelijkheid van beforeShowDay: function(day) {
maar verzamelt zelf de dagen met:
$("[data-handler=selectDay]");
(stond dat ook bij de API info ? ik had het nog niet gezien. Is het persoonlijke voorkeur? of zit er ook een belangrijke reden achter ?
Ik was met data zo begonnen: (in dat oude projekt waren ook niet zo veel afspraken)
beschikbaar = [ [ '2012/10/18' , 2 ], [ '2012/10/16' , 0 ], ['2012/11/23',3] ]; etc.
associatieve array (die eigenlijk niet bestaat in js las ik !! (maar met object methode werkt het wel)
json gebruikte ik hier nooit voor maar is misschien toch net iets makkelijker
Ik kan pas donderdag echt verder kijken,
Ik wil dan de datepicker na een keuze open houden en dan bij een on change de juiste radiobuttons laten verschijnen (in mijn data systeem is dat 1 2 of 3)
Maar alvast heel erg bedankt !!