i want to use the Datepicker for highlighting specific dates. Here is my latest code:
<script type="text/javascript">
var dates = [30/04/2010, 01/05/2010];
$(function(){
$('#datepicker').datepicker({
numberOfMonths: [2,3],
dateFormat: 'dd/mm/yy',
beforeShowDay: highlightDays
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i] == date) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
my CSS is:
#highlight, .highlight {
background-color: #cccccc;
}
Well the calendar comes up, but there is nothing highlighted. Where is the problem in my code? If anyone could help that would be great.
Another option/solution could be: disable all dates, but make available only dates in an array.
Thanks!
let tell you some of the problems...
1 . var dates = [30/04/2010, 01/05/2010];
would not store your dates as expected... it will do math operations...
2. change it to string but in this format: mm/dd/yy
so, you should have something like:
var dates = ['04/30/2010', '05/01/2010'];
3. use this function:
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (new Date(dates[i]).toString() == date.toString()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
4. CSS as:
td.highlight {
background-color: red;
border: 1px blue solid;
}
5. demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With