Date picker
The following set of examples demonstrate jQuery UI Datepicker component with different options. 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. 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.
Default functionality
The datepicker is tied to a standard form input field
Dates in other months
The datepicker can show dates that come from other than the main month being displayed.
Show week number
The datepicker can show the week of the year. The default calculation follows the ISO 8601 definition.
Multiple months
Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.
Date range
Select the date range to search for.
Format date
Display date feedback in a variety of ways.
Icon trigger
Click the icon next to the input field to show the datepicker.
Button bar
Display a button for selecting Today's date and a Done button for closing the calendar.
Month & year menu
Show month and year dropdowns in place of the static month/year header.
Populate alternate field
Populate an alternate field with its own date format using the altField and altFormat options.
Restrict date range
Restrict the range of selectable dates with the minDate and maxDate options.
Datepicker animations
Use different animations when opening or closing the datepicker.
Autocomplete
The following set of examples demonstrate jQuery UI Autocomplete component with different options The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option.
Default functionality
Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. This example demonstrates basic setup with default functionality.
Categories
A categorized search result with opgroup-like display option. All items under certain category have doubled horizontal padding. Built with _renderMenu and _create widget's methods.
Multiple results
Select a value, then continue typing to add more. This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
Remote data
Here the suggestions are car names, displayed when at least two characters are entered. The datasource is a server-side script which returns JSON data, specified via a simple URL for the source option.
Accent folding
If the text includes accented characters in the text field, Autocomplete is smart enough not to show results that aren't accented. Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
Custom data and display
You can use your own custom data formats and displays by simply overriding the default focus and select actions. Try typing "i" letter to display a list of projects or just press the down arrow.
Combobox
A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input or use the button to get the full list of items.
Remote with caching
Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
Select menu
The following set of examples demonstrates jQuery UI Select menu component. The Selectmenu widgets provides a styleable select element replacement. It will act as a proxy back to the original select element, controlling its state for form submission or serialization. The datasource of select menu widget is a native select element. Option groups are supported by default.
Default functionality
Selectmenu component with default functionality. The styling is similar to other custom select components. Also supports 4 different sizes using .ui-select-lg, *-sm, *-xs classes added to the parent container.
With icons
Selectmenu with icons and option groups. Uses _renderItem method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it.
Custom width
Example os Selectmenu component with auto width. This is the default width of the select that depends on the value size. For custom width use width option. When the value is null, the width of the native select is used.
Option groups
Example of Selectmenu with option groups. Select's opgroups are supported by default and use optgroup's label attribute as a text label. The styling is similar to optgroups in other custom select components.
With images
Selectmenu with images. Uses _renderItem method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it. Image size is equal to icons size.
Disabled state
The following example demonstrates disabled state of select menu. Select can be disabled either on init if disabled option is set to true or after init using ("option", "disabled", true) setter.
Spinner component
The following examples demonstrate jQuery UI Spinner component. Spinner is an enhanced text input for entering numeric values, with plus/minus buttons and arrow key handling. By default spinner doesn't support mouse wheel control of input value and requires a third party "jQuery Mousewheel" extension. Also added globalize.js library with all available cultures for easy internationalization. All stylings are inherited from basic input field styling.
Default functionality
This example demonstrates the very basic functionality with default options. Starting value is specified in input's value, mouse wheel support is added by default. Buttons styling and icons can be changed in CSS.
Decimal spinner
Decimal spinner with 0.01 step. The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.
Time spinner
A custom widget extending spinner. Use the globalization.js plugin to parse and output a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down spins hours.
Spinner min/max limits
Example with minimum and maximum allowed values. If globalize.js is included, the min and max options can be passed as a string which will be parsed based on the numberFormat and culture options.
Currency
Example of a currency selection and amount spinner. Uses numberFormat option to specify a format of numbers passed to Globalize, if available. Most common are "n" for a decimal number and "C" for a currency value.
Spinner overflow
The following example demonstrates overflow feature used together with spin event. Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it'll overflow to -10, and the other way round.
Disabled state
The following example demonstrates disabled state of a spinner. Spinner can be disabled either on init if disabled option is set to true or after init using ("option", "disabled", true) setter.
Spinner step
The spinner's step option controls the size of the step to take when spinning via buttons or via the stepUp()/stepDown() methods. The element's step attribute is used if it exists and the option is not explicitly set.