Skip to content

Instantly share code, notes, and snippets.

@sourcecodemart

sourcecodemart/jquery-calender-color-code.htm

Created January 6, 2014 05:32
Show Gist options
  • Save sourcecodemart/8278698 to your computer and use it in GitHub Desktop.
Save sourcecodemart/8278698 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery datepicker highlight date with different color
Raw
jquery-calender-color-code.htm
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI DatePicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-highlight .ui-state-default{
background: red !important;
border-color: red !important;
color: white !important;
}
</style>
<script type="text/javascript" language="javascript">
var dates = ['2014-01-05','2014-01-15','2014-01-25'];
jQuery(function(){
jQuery('input[type=text]').datepicker({
changeMonth : true,
changeYear : true,
beforeShowDay : function(date){
var y = date.getFullYear().toString(); // get full year
var m = (date.getMonth() + 1).toString(); // get month.
var d = date.getDate().toString(); // get Day
if(m.length == 1){ m = '0' + m; } // append zero(0) if single digit
if(d.length == 1){ d = '0' + d; } // append zero(0) if single digit
var currDate = y+'-'+m+'-'+d;
if(dates.indexOf(currDate) >= 0){
return [true, "ui-highlight"];
}else{
return [true];
}
}
});
})
</script>
</head>
<body>
<input type="text" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment