JezK
Edit File: date.html
<!doctype html> <html lang="en"> <head> <title> How to Highlight Particular Dates in JQuery UI Datepicker </title> <meta charset="utf-8"> <!-- date picker--> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> * { margin: 0 auto; padding: 0; } body { background-color: #F2F2F2; } .container { margin: 0 auto; width: 920px; padding: 50px 20px; background-color: #fff; } h3 { text-align: center; } #calendar { margin-top: 40px; } .event a { background-color: #42B373 !important; background-image :none !important; color: #ffffff !important; } </style> <script type="text/javascript"> jQuery(document).ready(function() { // An array of dates var eventDates = {}; eventDates[ new Date( '12/04/2014' )] = new Date( '12/04/2014' ); eventDates[ new Date( '12/06/2014' )] = new Date( '12/06/2014' ); eventDates[ new Date( '12/20/2014' )] = new Date( '12/20/2014' ); eventDates[ new Date( '12/25/2014' )] = new Date( '12/25/2014' ); // datepicker jQuery('#calendar').datepicker({ beforeShowDay: function( date ) { var highlight = eventDates[date]; if( highlight ) { return [true, "event", highlight]; } else { return [true, '', '']; } } }); }); </script> <script> $( "#calendar" ).datepicker({ dateFormat: 'yy-mm-dd' }).on('change', function() { //alert('startdate'+start_date); //alert('enddate'+end_date); var cmp= $("#datepicker").val(); alert(cmp); //var nwdate=$("#now_dated").val(); //var cudate=nwdate.split("-"); //var dcmp=cmp.split('-'); //var mcdate=dcmp[1]-1; //var mcheck=cudate[1]-1; //var cdate= new Date(dcmp[0],mcdate,dcmp[2]); //var checkd= new Date(cudate[0],mcheck,cudate[2]); //var asdate=start_date.split('-'); //var aedate=end_date.split('-'); //var amc_smonth=asdate[1]-1; //var amc_emonth=aedate[1]-1; //var sd1= new Date(asdate[0],amc_smonth,asdate[2]); //var end1= new Date(aedate[0],amc_emonth,aedate[2]); }); </script> </head> <body> <div class="container"> <h3> Highlight Particular Dates in JQuery UI Datepicker </h3> <div id="calendar" > </div> </div> </body> </html>