JQuery UI

Most important additional requirement will be JQuery UI ( JQuery user interface ) which is a library of different widgets like Date picker ( Calendar ) , Slider , Spinner etc.
To use JQuery UI, you must include JQuery. JQuery is the core library , JQuery UI is built on top of it.

In addition to basic JQuery library you need one more CSS file ( Style ) , known as Themes.

Download JQuery UI here
Here is the files required for JQuery UI

JQuery
JQuery UI
JQuery UI CSS
Additional Plug in files

Visit JQuery UI CDN

Here is the sample code required to link to CDN

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet">

Keep this code above the <script>JQuery Code</script> and before the end of <BODY> tag

JQuery UI Themes

These are Thems you can configure or download
DEMO of JQuery UI different Themes by user Selection

How to use Themes for JQuery UI components

Check different themes by using the dropdown list at right side of the above demo page. Once you select a theme from the list the changes will be shown and the URL of the CDN ( Content Delivery Network ) is displayed. Copy the URL and use it like this .

<link href='https://code.jquery.com/ui/1.12.1/
themes/humanity/jquery-ui.css' rel='stylesheet'>

Accordion	Expand and collapse sections of content
Calendar	Display calendar to select Month Year date
AutoComplete	completes words or strings as the user type
controlgroup	set of widgets for common control and theme
checkboxradio	checkbox radio buttons to themeable buttons
slider	Pointer to slide over a range to return data
draggable	Dragging element to different position by Mouse
droppable	Accepts draggable elements
dialog-box	Box to show message or take user inputs
menu	Navigational Menu & sub menu with easy positioning
progress bar	showing status or progress of any process
tabs	Grouping contents under different tabs with easy navigation
tooltip	Showing ( help )message on mouse over the element
selectable	Select multiple elements by using lasso or mouse & keyboard
resizable	Resizable elements with options

easings options
JQuery

Video Tutorials on JQuery UI

JQuery UI date picker Calendar formats & collecting user selected value with minimum maximum range

How to interlink two Calendars to select start date and end date by user in JQuery UI datepicker

Dialog box using JQuery UI to display message and take user inputs

JQuery UI Autocomplete to suggest the user as they type with available options from array - Part-1

JQuery UI autocomplete to get user options as source from MySQL database table part-3

JQuery UI progress bar to display status and reading and setting the values with DEMO

JQuery UI autocomplete to get record details from MySQL database on selection of option- part-2

Textarea counter to restrict user entered text with progress bar to show the length

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery UI

JQuery UI Themes

How to use Themes for JQuery UI components

Video Tutorials on JQuery UI

Subscribe

1

2

3

4