The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.
You can use keyboard shortcuts to drive the datepicker:
DEMO: How to Add Calendar using jQuery.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#dtpicker").datepicker();
$( "#dtpicker" ).datepicker( "option", "dateFormat", "D, d M, yy" );
});
</script>
</head>
<body>
<form>
<p> Click on textbox to select date</p>
<input type="text" id="dtpicker" width="400px"/>
</form>
</body>
</html>
By default, the datepicker calendar opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.
You can use keyboard shortcuts to drive the datepicker:
- page up/down - previous/next month
- ctrl+page up/down - previous/next year
- ctrl+home - current month or open when closed
- ctrl+left/right - previous/next day
- ctrl+up/down - previous/next week
- enter - accept the selected date
- ctrl+end - close and erase the date
- escape - close the datepicker without selection
DEMO: How to Add Calendar using jQuery.
Source code:
<!DOCTYPE html><html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#dtpicker").datepicker();
$( "#dtpicker" ).datepicker( "option", "dateFormat", "D, d M, yy" );
});
</script>
</head>
<body>
<form>
<p> Click on textbox to select date</p>
<input type="text" id="dtpicker" width="400px"/>
</form>
</body>
</html>
No comments:
Post a Comment