highlight dates jquery
Ik heb onderstaand script gevonden maar het lijkt niet te werken onder jquery 2.0.2.
Weet iemand waarom?
http://jsfiddle.net/JJDmc/
Toevoeging op 16/11/2013 23:16:46:
Nou deze werkt wel..
http://jsfiddle.net/Z76Z6/
Kan iemand me de juiste richting op sturen?
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
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
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="lib/jquery/development-bundle/themes/base/jquery.ui.all.css" />
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-nl.js"></script>
<style>
#highlight, .highlight {
background-color: red;
}
</style>
</head>
<body>
<form method="POST">
<label>
<b>
Van:
</b>
</label>
<input type="text" name="from" id="input1" size="10" value="
<?php if (isset ($_POST['from'])){ echo $_POST['from'];}?>
">
<label>
<b>
Tot:
</b>
</label>
<input type="text" name="till" id="input2" size="10" value="
<?php if (isset ($_POST['till'])){ echo $_POST['till'];}?>
">
<input type="submit" value="Submit">
<div id="range"></div>
</form>
<script>
$("#range").datepicker({
minDate: 0,
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
}
,
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
}
else if( selectedDate < date1 ) {
$("#input2").val( $("#input1").val() );
$("#input1").val( dateText );
$(this).datepicker();
}
else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
}
);
</script>
</body>
</html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="lib/jquery/development-bundle/themes/base/jquery.ui.all.css" />
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery.ui.datepicker-nl.js"></script>
<style>
#highlight, .highlight {
background-color: red;
}
</style>
</head>
<body>
<form method="POST">
<label>
<b>
Van:
</b>
</label>
<input type="text" name="from" id="input1" size="10" value="
<?php if (isset ($_POST['from'])){ echo $_POST['from'];}?>
">
<label>
<b>
Tot:
</b>
</label>
<input type="text" name="till" id="input2" size="10" value="
<?php if (isset ($_POST['till'])){ echo $_POST['till'];}?>
">
<input type="submit" value="Submit">
<div id="range"></div>
</form>
<script>
$("#range").datepicker({
minDate: 0,
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
}
,
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
}
else if( selectedDate < date1 ) {
$("#input2").val( $("#input1").val() );
$("#input1").val( dateText );
$(this).datepicker();
}
else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
}
);
</script>
</body>
</html>
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function() {
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$("#range").datepicker({
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
}
}
});
});
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd'
});
$("#range").datepicker({
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
}
}
});
});