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 Esckey 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 numberOfMonthsoption 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'sdate and a Donebutton 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 altFieldand altFormatoptions.
Restrict date range
Restrict the range of selectable dates with the minDateand maxDateoptions.
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 _renderMenuand _createwidget'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 autocompletingmultiple 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 sourceoption.
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 focusand selectactions. 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 menucomponent. 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, *-xsclasses added to the parent container.
With icons
Selectmenu with icons and option groups. Uses _renderItemmethod 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 widthoption. 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 labelattribute as a text label. The styling is similar to optgroups in other custom select components.
With images
Selectmenu with images. Uses _renderItemmethod 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 disabledstate of select menu. Select can be disabled either on init if disabledoption is set to trueor after init using ("option", "disabled", true)setter.
Spinner component
The following examples demonstrate jQuery UI Spinnercomponent. 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.jslibrary 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.01step. 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.jsplugin to parse and output a timestamp, with custom stepand pageoptions. Cursor up/down spins minutes, page up/down spins hours.
Spinner min/max limits
Example with minimumand maximumallowed values. If globalize.jsis included, the minand maxoptions can be passed as a string which will be parsed based on the numberFormatand culture options.
Currency
Example of a currency selection and amount spinner. Uses numberFormatoption 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 overflowfeature used together with spinevent. 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 disabledstate of a spinner. Spinner can be disabled either on init if disabledoption is set to trueor after init using ("option", "disabled", true)setter.
Spinner step
The spinner's stepoption 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.