<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var x = ["Go to the zoo; Go to school", "Go to the zoo; Go to school", "Go to the zoo; Go to school"];
$("#datepicker").datepicker(
{
onSelect: function(dateText, inst) {
var d = inst.selectedDay;
if (x[d] != undefined) {
alert(x[d]);
} else {
return false;
}
//alert(x);
},
onChangeMonthYear: function(year, month, inst) {
//alert(month);
// Chờ month load xong mới bind công việc vào ngày
setTimeout(function() {
// Load công việc ngày trong tháng vào mảng
x = ["Go to the zoo!!!; Go to school", "Go to the zoo; Go to school", "Go to the zoo; Go to school"];
// Bind công việc vào ngày tương ứng!
$("#datepicker").find('td > a').each(
function () {
var d = this.innerHTML;
//alert(d);
if (x[d] != undefined) {
this.title = x[d];
this.style.color = 'red';
}
}
);
}, 1000);
}
}
);
});
</script>
</head>
<body style="font-size:62.5%;">
<div type="text" id="datepicker"></div>
</body>
</html>
Reference:
http://docs.jquery.com/UI/Datepicker