1. Components
2. Forms
3. Datepicker

Datepicker

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Read the Official jQuery UI Datepicker Documentationfor a full list of instructions and other options.

Display Inline

Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker()on a div instead of an input.

$('#datepicker1').datepicker();

Dates In Other Months

The datepicker can show dates that come from other than the main month being displayed. These other dates can also be made selectable.

$('#datepicker2').datepicker({  showOtherMonths: true,  selectOtherMonths: true});

Month and Year Menus

Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.

$('#datepicker3').datepicker({  showOtherMonths: true,  selectOtherMonths: true,  changeMonth: true,  changeYear: true});

Basic Functionality

Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

$('#datepicker1').datepicker();

Display Button Bar

Display a button for selecting Today's date and a Done button for closing the calendar.

$('#datepicker5').datepicker({  showButtonPanel: true});

Multiple Months

Set the numberOfMonthsoption to an integer of 2 or more to show multiple months in a single datepicker.

$('#datepicker6').datepicker({  numberOfMonths: 2});

Date Range

Select the date range to search for.

var dateFormat = 'mm/dd/yy',from = $('#dateFrom').datepicker({  defaultDate: '+1w',  numberOfMonths: 2}).on('change', function() {  to.datepicker('option','minDate', getDate( this ) );}),to = $('#dateTo').datepicker({  defaultDate: '+1w',  numberOfMonths: 2}).on('change', function() {  from.datepicker('option','maxDate', getDate( this ) );});function getDate( element ) {  var date;  try {    date = $.datepicker.parseDate( dateFormat, element.value );  } catch( error ) {    date = null;  }  return date;}