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 Documentation for 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 numberOfMonths option 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;
}

Components