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>
You need to use library MultiDatesPicker v1.6.3 for jQuery UI
You can handle it using beforeShowDay
event, Here is the reference
Following the code example:
$(function() { $("#datepicker").datepicker({ beforeShowDay: function(d) { var a = new Date(2017, 2, 10); // April 10, 2012 var b = new Date(2017, 2, 20); // April 20, 2012 return [true, a <= d && d <= b ? "my-class" : ""]; } }); });
.my-class { background: red; } .my-class a { background: lime !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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.