Using jQuery Datepicker, related to this page http://keith-wood.name/datepick.html
I want to highlight specify dates given by array
ex: array("2012-12-24" => "red", "2012-12-24" => "green")
How get this approach.
My poor code
<style type="text/css">
@import"jquery.datepick.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
$(function () {
$('#popupDatepicker').datepick();
$('#inlineDatepicker').datepick({
onSelect: showDate
});
});
function showDate(date) {
alert('The date chosen is ' + date);
}
</script>
</head>
<body>
<p>A popup datepicker
<input type="text" id="popupDatepicker">
</p>
<p>Or inline</p>
<div id="inlineDatepicker"></div>
Define beforeShowDay within datepicker() method. In the function create a new date format according to the defined format (dd-mm-yyyy) in an Array. Check for the date in the Array with $. inArray() method if it is available then return [true, "highlight", tooltip_text]; otherwise return [true] .
$(document). ready(function () { $("#datepicker"). datepicker({ onSelect: function (dateText, inst) { var date = $(this). val(); alert(date); } }); });
You can also try Kendo UI. It has a Calendar widget and the DatePicker widget which takes an array of dates, from that it will be easy to customize the template of the widget.
Kendo UI - Calendar
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With