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 the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
$('#datepicker1').datepicker();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 });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 });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 a button for selecting Today's date and a Done button for closing the calendar.
$('#datepicker5').datepicker({ showButtonPanel: true });Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.
$('#datepicker6').datepicker({ numberOfMonths: 2 });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; }