Open In App

jQuery UI Date Picker

Last Updated : 20 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker is usually connected to a text box so user selection of date from the calendar can be transferred to the textbox. You need to add the below CDN to your HTML document to use it.

CDN Links:

<!-- jQuery UI CSS CDN -->
<link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
rel='stylesheet'>

<!-- jQuery UI JS CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

Example 1: The below example illustrates the use of the jQuery UI date picker with its practical implementation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery UI | Date Picker
    </title>
 
    <link href=
          rel='stylesheet'>
 
    <script src=
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    Date: <input type="text"
                 id="my_date_picker">
 
    <script>
        $(document).ready(function () {
 
            $(function () {
                $("#my_date_picker").
                datepicker();
            });
        })
    </script>
</body>
 
</html>


Output:

datePickerGIF

Example 2: The below example will show how you can set a default date to the datepicker,

HTML




<!DOCTYPE html>
<html>
     
<head>
    <title>
        jQuery UI | Date Picker
    </title>
     
    <link href=
          rel='stylesheet'>
     
    <script src=
    </script>
     
    <script src=
    </script>
</head>
 
<body>
    Date: <input type="text" id="my_date_picker">
 
    <script>
        $(function() {
            $( "#my_date_picker" ).datepicker({
                defaultDate:"09/22/2019"
            });
        });
    </script>
</body>
 
</html>


Output:

datepicker2GIF

Some features of jQuery UI Date Picker

Managing the date format:

While displaying the calendar we can manage the date format. We can use the following jQuery code in the script section to get the result.

Syntax:

<script> 
$(function() {
$( "#my_date_picker" ).datepicker({
dateFormat: 'dd-mm-yy',
defaultDate:"24-09-2019"
});
});
</script>

Managing the Weekday:

By default, the first day of the week is displayed from Sunday ( firstDay=0 ). We can change the starting day by changing the value of firstDay.

Syntax:

<script> 
$(function() {
$( "#my_date_picker" ).datepicker({
firstDay:2 // Tuesday is first day
});
});
</script>

Updating Month and Year:

Based on our requirement we can add options for the users to select Month and Year.

Syntax:

<script> 
$(function() {
$( "#my_date_picker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>

Maximum and Minimum dates to Select:

We can restrict the user selection of Dates from the calendar by assigning a Maximum and Minimum Date value.

Syntax:

$(function() { 
$( "#my_date_picker" ).datepicker({
maxDate:'+3d',
minDate: '-4d'
});
});

Interlocking two Datepickers:

We have two calendars, one calendar is to choose the start date and the other one is to choose end date in the calendar and we will try to interlock them.

Example: The below example will explain the how you can interlock two date pickers.

html




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel='stylesheet'>
   
      <script src=
    </script>
    <script src=
    </script>
    <style>
        .ui-datepicker {
            width: 12em;
        }
        h1{
            color:green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        Start Date:
        <input type="text"
               id="my_date_picker1">
        End Date:
        <input type="text"
               id="my_date_picker2"
        <script>
            $(document).ready(function() {
 
                $(function() {
                    $("#my_date_picker1").
                    datepicker({});
                });
 
                $(function() {
                    $("#my_date_picker2").
                    datepicker({});
                });
 
                $('#my_date_picker1').change(function() {
                    startDate = $(this).
                    datepicker('getDate');
                    $("#my_date_picker2").
                    datepicker("option", "minDate", startDate);
                })
 
                $('#my_date_picker2').change(function() {
                    endDate = $(this).
                    datepicker('getDate');
                    $("#my_date_picker1").
                    datepicker("option", "maxDate", endDate);
                })
            })
        </script>
    </center>
</body>
 
</html>


Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Similar Reads

How to set minimum and maximum date in HTML date picker
In HTML, validating and setting the minimum and maximum dates can be done using various approaches. This is useful in the real-time applications of booking, event scheduling, etc. Table of Content Using min and max AttributesUsing JavaScript to Set min and max DatesUsing min and max AttributesIn this approach, we are using the min and max attribute
2 min read
How to validate if input date (end date) in input field must be after a given date (start date) using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come after some given date(Ex. 'end date' must be after 'start date')
5 min read
How to validate if input date (start date) in input field must be before a given date (end date) using express-validator ?
In HTML forms, we often required validation of different types. Validate existing email, validate password length, validate confirm password, validate to allow only integer inputs, these are some examples of validation. In certain cases, we want the user to type a date that must come before some given date (Ex: 'start date' must come before 'end da
5 min read
How to display date picker in the page using jQuery UI ?
DatePickers are needed whenever we want to ask for the date from the user. We can store the data and use it for future uses. jQuery provides an easy method to create our DatePicker. The DatePicker of jQuery is inline, so the UI is very simple yet attractive. Syntax: We need an input element and then we are going to call the jQuery DatePicker functi
2 min read
mat-date-picker in Angular Material
Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.Installation syntax: ng add @angular/material Approach: Fi
2 min read
How to create Date Picker in ReactJS?
Date pickers provide a simple way to select a single value from a pre-determined set. Material UI for React has this component available for us and it is very easy to integrate. We can create a Date Picker in ReactJS using the following approach: Creating React Application And Installing Module: Step 1: Create a React application using the followin
2 min read
React.js Blueprint Date picker Props
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Date picker Props. The DatePicker Component helps in choosing a single date. Date Picker Props: canClearSelection: It allows
3 min read
React.js Blueprint Date picker Shortcuts
Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Date picker Shortcuts. The DatePicker Component helps in choosing a single date. The menu given on the left of the datepicke
2 min read
React.js Blueprint Date picker Modifiers
React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. The React.js Blueprint DatePicker Component allows the user to choose or select date or dates. The modifier prop allows to apply styles to the calendar. Syntax: &lt;DatePicker modifiers={}/&gt;
2 min read
How to add a date picker in form using HTML ?
To add a date picker in a form using HTML, you can use the &lt;input&gt; element with the type attribute set to "date". A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picker in form using HTML5.  Syntax:&lt;input type="dat
2 min read