jQuery UI Datepicker, Button, Autocomplete, and Menu Widgets

The jQuery UI Datepicker widget offers a rich interface for selecting dates, with extensive configuration options and localization support. A basic implementation requires only an input element and a single line of JavaScript:

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

Key configuration options include minDate and maxDate to restrict selectable date ranges, dateFormat to control output formatting (e.g., "d MM yy" for "5 July 2023"), and numberOfMonths to display multiple calendars simultaneously. The widget supports localization through language files like jquery.ui.datepicker-fr.js or the comprehensive jquery-ui-i18n.js bundle.

The Button widget transforms standard HTML elements (<button>, <input>, or <a>) into themable controls. Basic usage:

$("#myButton").button();

Buttons support icons via the icons option (e.g., {primary: "ui-icon-disk"}), and can be grouped using buttonset() for radio/checkbox controls. Specialized methods like refresh() update visual states when underlying values change programmatically.

The Autocomplete widget provides suggestions as users type, supporting both local arrays and remote data sources:

$("#city").autocomplete({
  source: ["London", "Paris", "Tokyo"]
});

For remote data, specify a URL string or custom function. Advanced implementations can process non-standard JSON responses and inject HTML into suggestions using extensions. Key options include minLength (minimum characters before triggering) and appendTo (container for suggestion menu).

The Menu widget converts nested lists into interactive navigation:

$("#myMenu").menu();

Features include keyboard navigation, submenus, and programmatic control via methods like focus() and select(). Customization options cover icon styles (icons.submenu), positioning (position), and event handling (select, focus). While vertical menus are default, horizontal layouts can be achieved with CSS overrides and custom positioning logic.

All widgets integrate with jQuery UI's theme system and follow consistent API patterns for initialization, option management (option() method), and destruction (destroy() method).

Tags: jQueryUI datepicker Button Autocomplete Menu

Posted on Thu, 28 May 2026 18:06:12 +0000 by j-dearden