jQuery UI DatePicker | Calendar
Here we are using jQuery date picker.
<html>
<head>
<title>jQuery UI DatePicker | Calendar</title>
<scriptsrc="Scripts/Jquery-ui/js/jquery-1.9.1.js"></script>
<scriptsrc="Scripts/Jquery-ui/js/jquery-ui-1.10.3.custom.js"></script>
<linkhref="Scripts/Jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.css"/>
<scripttype="text/javascript">
$(document).ready(function() {
$("#txtDate").datepicker();
});
</script>
</head>
<body>
<inputtype="text"id="txtDate"/>
</body>
</html>
Output:
Change calendar date format
Below are some date formats : -
1. mm/dd/yy - 12/18/2014
2. yy-mm-dd - 2014-12-18
3. d M, y - 18 Dec, 14
4. d MM, y - 18 December, 14
5. DD, d MM, yy - Thursday, 18 December, 2014
$("#txtDate").datepicker({
dateFormat: "DD, d MM, yy"
});
Output:
Display calendar without using TextBox
use a div to show calendar anywhere.
$("#divDate").datepicker({
dateFormat: "d M,y"
});
Output:
Display month and year in dropdown list in calendar
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true
});
Output:
Display multiple month in a calendar
$("#txtDate").datepicker({
numberOfMonths: 3
});
Output:
Open calendar on image button click
$("#txtDate").datepicker({
showOn: "button",
buttonImage: "../Images/calendar.gif",
buttonImageOnly: true
});
Output:
Animation in calendar
Animation keys - slideDown, fadeIn, blind, bounce, clip, drop, fold, slide
$("#txtDate").datepicker({
showAnim: "bounce"
});
Output:
Disable previous dates
$("#txtDate").datepicker({
minDate:0
});
Output:
