<!doctype html>
<html>
<head>
<title>How to Highlight selected date in Datepicker</title>
<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script src='jquery-ui.min.js' type='text/javascript'></script>
<link href='style.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
// An array of dates ( 'dd-mm-yyyy' )
/* var startDate ='25-09-2018';
var startDate ='29-09-2018';*/
var highlight_dates = ['25-9-2018','26-9-2018','27-9-2018','29-9-2018'];
$(document).ready(function(){
// Initialize datepicker
$('#datepicker').datepicker({
beforeShowDay: function(date){
var month = date.getMonth()+1;
var year = date.getFullYear();
var day = date.getDate();
// Change format of date
var newdate = day+"-"+month+'-'+year;
console.log(newdate);
// Set tooltip text when mouse over date
var tooltip_text = "New event on "+newdate;
// Check date in Array
if(jQuery.inArray(newdate, highlight_dates) != -1){
return [true, "highlight", tooltip_text ];
}
return [true];
}
});
});
</script>
</head>
<body>
<div class='container'>
<input type='text' id='datepicker'><br>
</div>
</body>
</html>
<html>
<head>
<title>How to Highlight selected date in Datepicker</title>
<link href='jquery-ui.min.css' rel='stylesheet' type='text/css'>
<script src='jquery-3.0.0.js' type='text/javascript'></script>
<script src='jquery-ui.min.js' type='text/javascript'></script>
<link href='style.css' rel='stylesheet' type='text/css'>
<script type='text/javascript'>
// An array of dates ( 'dd-mm-yyyy' )
/* var startDate ='25-09-2018';
var startDate ='29-09-2018';*/
var highlight_dates = ['25-9-2018','26-9-2018','27-9-2018','29-9-2018'];
$(document).ready(function(){
// Initialize datepicker
$('#datepicker').datepicker({
beforeShowDay: function(date){
var month = date.getMonth()+1;
var year = date.getFullYear();
var day = date.getDate();
// Change format of date
var newdate = day+"-"+month+'-'+year;
console.log(newdate);
// Set tooltip text when mouse over date
var tooltip_text = "New event on "+newdate;
// Check date in Array
if(jQuery.inArray(newdate, highlight_dates) != -1){
return [true, "highlight", tooltip_text ];
}
return [true];
}
});
});
</script>
</head>
<body>
<div class='container'>
<input type='text' id='datepicker'><br>
</div>
</body>
</html>
No comments:
Post a Comment