jQuery UI Datepicker

By: Rajesh P.S.

jQuery UI Datepicker is a popular user interface component that allows users to easily pick dates from a calendar widget. It's built on top of the jQuery library and provides a customizable and interactive way to select dates. Here are some details and examples to help you understand how jQuery UI Datepicker works:

Installation

To use jQuery UI Datepicker, you need to include the jQuery library and the jQuery UI library in your HTML file. You can include them using CDN links or by downloading the libraries and linking to them locally.

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

Basic Usage

To create a datepicker widget, you need an HTML input element. You can then apply the datepicker function to that input element.

Continue Reading...

<input type="text" id="datepicker"> // Initialize the datepicker $("#datepicker").datepicker();

Date Format

You can specify the format in which the selected date should be displayed and parsed. Common formats include "mm/dd/yyyy" and "yy-mm-dd".

$("#datepicker").datepicker({ dateFormat: "mm/dd/yyyy" });

Restricting Date Range

You can set the minimum and maximum selectable dates to restrict the range of dates users can pick.

$("#datepicker").datepicker({ minDate: new Date(2023, 0, 1), // January 1, 2023 maxDate: new Date(2023, 11, 31) // December 31, 2023 });

Inline Datepicker

Instead of a popup calendar, you can create an inline datepicker directly in the HTML.

<div id="datepicker"></div> $("#datepicker").datepicker();

Localization

jQuery UI Datepicker supports localization for different languages and regions.

$("#datepicker").datepicker({ dateFormat: "dd/mm/yy", // Load French localization regional: "fr" });

Events

You can attach event handlers to different datepicker events, such as when a date is selected.

$("#datepicker").datepicker({ onSelect: function(dateText) { console.log("Selected date:", dateText); } });

Theming

jQuery UI Datepicker allows you to apply custom themes to match your application's design.

$("#datepicker").datepicker({ showAnim: "fadeIn", // Animation effect changeMonth: true, changeYear: true });

Browser View

jQuery UI Datepicker Example

Select a date:

Full Source | jQuery

<!DOCTYPE html> <html> <head> <title>jQuery UI Datepicker Example</title>  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { // Initialize the datepicker $("#datepicker").datepicker({ dateFormat: "mm/dd/yyyy", // Date format minDate: new Date(2023, 0, 1), // Minimum selectable date maxDate: new Date(2023, 11, 31), // Maximum selectable date onSelect: function(dateText) { console.log("Selected date:", dateText); } }); }); </script> </head> <body> <h1>jQuery UI Datepicker Example</h1> <p>Select a date:</p>  <input type="text" id="datepicker"> </body> </html>

Conclusion

jQuery UI Datepicker is a JavaScript plugin built on top of jQuery that provides a user-friendly calendar widget for selecting dates in web applications. It offers features like customizable date formats, date range restrictions, localization support, and event handling. By integrating this plugin, developers can enhance user interactions when choosing dates within their web interfaces.

Next > jQuery UI autocomplete

Related Topics

More Related Topics.....