jQuery UI Widget : Datepicker
This page discusses - jQuery UI Widget : Datepicker
This page discusses - jQuery UI Widget : Datepicker
jQuery UI Widget : Datepicker

jQuery UI Widget : Datepicker
You can datepicker to your web page for inputting date. The language and date
format can be customize. By default, the datepicker calendar opens in a small
overlay on Focus and closes automatically on Blur or when a date is selected.
The datepicker is very useful on the website. In this example you will learn
how to use jQuery datepicker component.
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
For options, events ,method and theming click here
EXAMPLE :
datepicker.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Datepicker</title>
<style type="text/css">
@import "DatePicker/flora.datepick.css";
</style>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="DatePicker/jquery.datepick.js"></script>
<script type="text/javascript">
$(function() {
$('#popupDatepicker').datepick();
});
</script>
</head>
<body bgcolor="#ADFF2F">
<h1><font color="green">jQuery popup Date picker</font></h1>
<font color="green">
<p>Enter Date <input type="text" id="popupDatepicker"></p>
</font>
</body>
</html> |
Output :
When you click inside input box :

Download Source Code
Click
here to see online demo
Learn from experts! Attend
jQuery Training classes.
Ads