javascriptjqueryhtmlcss

Jquery UI Datepicker - How to highlight multiple date bgcolor with jquery/javascript

I know, lot of questions also in Stackoverflow. But did'nt get a working answer. Anyone can help me to solve this problem?

I want to highlight multiple date of current month. Eg: 02 March 2017, 10 March 2017, 25 March 2017.

My code:

 $( function() {
    $( "#datepicker" ).datepicker();
  } );
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="datepicker"></div>

Solution

  • Yes. I got the answer. Here is the working solution.

    var dates = ['03/02/2017', '03/10/2017', '03/25/2017'];

$('#datepicker').datepicker({
    dateFormat: 'dd/mm/yy',
    //defaultDate: new Date('03/10/2017'), // this line is for testing
    beforeShowDay: highlightDays
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (new Date(dates[i]).toString() == date.toString()) {
            return [true, 'highlight'];
        }
    }
    return [true, ''];
}
    td.highlight > a {
	background: #E50104!important;
	color: #fff!important;
}
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<div id="datepicker"></div>