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.

Related Tags for jQuery UI Widget : Datepicker:

«Previous Index Next»