JavaScript: jQuery Datepicker - simple highlighting of specific days, who can help? (source inside)

Question

I want to use Datepicker to highlight specific dates. Here is my last 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:

 #highlight, .highlight { background-color: #cccccc; } 

Well, a calendar appears, but nothing stands out. Where is the problem in my code? If someone can help, it will be great.

Another option / solution might be: disable all dates, but make only the dates in the array available.

Thanks!

Answer 1

tell you some problems ...

1. var date = [30/04/2010, 01/05/2010];

will not save your dates as expected ... it will perform math operations ...

2. change it to a string, but in this format: mm/dd/yy
so, you should get 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 like:

 td.highlight { background-color: red; border: 1px blue solid; } 

5. demo

Answer 2

There is a problem with the time zone.

 function highlightDays(date) { for (var i = 0; i < dates.length; i++) { if (new Date(dates[i]).toString().substr(0, 16) == date.toString().substr(0, 16)) { return [true, 'highlight']; } } return [true, '']; }