YouTip

## Default Functionality The Datepicker is tied to a standard form input field. Focus on the input field (by clicking or using the tab key) to open an interactive calendar in a small overlay. Select a date, click anywhere on the page (the input field loses focus), or press the Esc key to close. If a date is selected, the feedback is displayed as the value of the input field. $(function() { $( "#datepicker" ).datepicker(); });

Date:

## Animation Use different animations when opening or closing the datepicker. Select an animation from the dropdown, then click in the input field to see its effect. You can use any of the three standard animations or any of the UI effects. $(function() {$( "#datepicker" ).datepicker();$( "#anim" ).change(function() {$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );});});

Date:

Animation:
Show (default)Slide DownFade InBlind (UI Blind Effect)Bounce (UI Bounce Effect)Clip (UI Clip Effect)Drop (UI Drop Effect)Fold (UI Fold Effect)Slide (UI Slide Effect)None

## Dates in Other Months The datepicker can show dates from other months. Those dates can also be made selectable. $(function() { $( "#datepicker" ).datepicker({ showOtherMonths: true, selectOtherMonths: true }); });

Date:

## Show Button Panel Use the boolean `showButtonPanel` option to display a "Today" button for selecting the current date and a "Done" button for closing the calendar. By default, each button is enabled when the button panel is displayed, but buttons can be disabled via other options. Button text can be customized. $(function() { $( "#datepicker" ).datepicker({ showButtonPanel: true }); });

Date:

## Inline Display The datepicker is embedded within the page, not displayed in an overlay. Simply call .datepicker() on a div instead of an input. $(function() { $( "#datepicker" ).datepicker(); }); Date: ## Display Month & Year Menus Display dropdowns for month and year instead of static month/year headings, making it easier to navigate over large time spans. Add the boolean `changeMonth` and `changeYear` options. $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); });

Date:

## Display Multiple Months Set the `numberOfMonths` option to an integer of 2 or greater to display multiple months within a single datepicker. $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); });

Date:

## Format Date Display date feedback in various ways. Select a date format from the dropdown, then click in the input field and select a date to see the date displayed in the chosen format. $(function() { $( "#datepicker" ).datepicker(); $( "#format" ).change(function() { $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() ); }); });

Date:

Format options:
Default - mm/dd/yy ISO 8601 - yy-mm-dd Short - d M, y Medium - d MM, y Full - DD, d MM, yy With text - 'day' d 'of' MM 'in the year' yy

## Icon Trigger Click the icon next to the input field to display the datepicker. Set the datepicker to open on focus (default behavior), on click of the icon, or on focus/click of the icon. $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); });

Date:

## Localize Calendar Localize the datepicker calendar language and format (default is English / Western). The datepicker includes built-in support for right-to-left languages like Arabic and Hebrew. $(function() { $( "#datepicker" ).datepicker( $.datepicker.regional ); $( "#locale" ).change(function() { $( "#datepicker" ).datepicker( "option", $.datepicker.regional[ $( this ).val() ] ); }); });

Date:   Arabic (‫(العربية Chinese Traditional (繁體中文) English French (Français) Hebrew (‫(עברית

## Populate Alternate Field Use the `altField` and `altFormat` options to populate another input field with a formatted date whenever a date is selected. This feature provides a user-friendly date to the user after further processing of a computer-friendly date. $(function() { $( "#datepicker" ).datepicker({ altField: "#alternate", altFormat: "DD, d MM, yy" }); });

Date:  

## Restrict Date Range Limit the selectable date range using the `minDate` and `maxDate` options. Set the start and end dates to actual dates (new Date(2009, 1 - 1, 26)), a numeric offset from today (-20), or a string with a period and unit ('+1M +10D'). If set as a string, use 'D' for days, 'W' for weeks, 'M' for months, and 'Y' for years. $(function() { $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); });

Date:

## Select a Date Range Select a date range to search. $(function() { $( "#from" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#to" ).datepicker( "option", "minDate", selectedDate ); } }); $( "#to" ).datepicker({ defaultDate: "+1w", changeMonth: true, numberOfMonths: 3, onClose: function( selectedDate ) { $( "#from" ).datepicker( "option", "maxDate", selectedDate ); } }); }); FromTo ## Show Week of the Year The datepicker can display the week of the year. The default calculation is defined by ISO 8601: weeks start on Monday, and the first week of the year contains the first Thursday of the year. This means that some days of the year may belong to a week from another year. $(function() { $( "#datepicker" ).datepicker({ showWeek: true, firstDay: 1 }); });

Date: