jQuery UI Widget : Datepicker

This page discusses - jQuery UI Widget : Datepicker

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 &nbsp;<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.