jQuery UI Datepicker

Download WebSite1.zip - 127.39 KB

Introduction

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.

Background

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

.

Using the code

Utility functions
•$.datepicker.setDefaults( settings ) - Set settings for all datepicker instances.
•$.datepicker.formatDate( format, date, settings ) - Format a date into a string value with a specified format.
•$.datepicker.parseDate( format, value, settings ) - Extract a date from a string value with a specified format.
•$.datepicker.iso8601Week( date ) - Determine the week of the year for a given date: 1 to 53.
•$.datepicker.noWeekends - Set as beforeShowDay function to prevent selection of weekends

 <!-- Add in head -->
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.12.custom.css"/>

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>

<script type="text/javascript" language="javascript">

$(function() {

$("#datepicker").datepicker();

});

</script>

 

<!-- Add in Body -->

<p>Date: <input type="text" id="datepicker"></p>

 
        

Points of Interest

This is very easy to use. Only single line of code is required to implement the date picker.

History

Check for more details - http://jqueryui.com/demos/datepicker/#default