jQuery UI | Date Picker

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 usually connected to a text-box so user selection of date from the calendar can be transferred to the textbox.

We will use the CDN link for different libraries and styles. To display any jQuery UI widget, we have to use the link of jQuery and jQuery UI. We will also use style property and used the theme Cupertino for our calendar. You can change the theme to match your style requirements.

<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’ rel=’stylesheet’>



Example 1: This example display a date picker.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Default Date Selected: By default today’s date is selected in the calendar. However, we can change the default date by assigning the value to the default date.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        jQuery UI | Date Picker
    </title>
      
    <link href=
ui-lightness/jquery-ui.css'
        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>

chevron_right


Output:

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


We have two calendars, one calendar is to choose the start date and the other one is to choose end date in the calendar. It can be used for hotel booking where we have to select check-in Date and check-out date. The following conditions must be met for such arrangements.

  • Once the start date is selected, the end date can’t be before the start date
  • Once the end date is selected, the start date can’t be after the end date
  • End date can’t be changed to before start date
  • Start date can’t be changed to after end date.
  • Dates which can’t be selected should be disabled for selection in the above cases.

Interlocking two Datepickers

Before using two interlocked calendars we will learn how to set Minimum selectable date and Maximum selectable date.
minDate: Minimum Selectable date. maxDate: Maximum Selectable Date. There is one example at the end of the previous article on DatePicker. Here it is again.

Interlocking of two Calendars
Change function of Calendar:
We will be using the change function to trigger the event. We will set the minDate for the End Calendar whenever the change function of Start Calendar is triggered.
Similarly, we will set the maxDate for the Start Calendar when ever change function of End Calendar is triggered.
getDate()
This method returns the selected date of the calendar. Here is an example

filter_none

edit
close

play_arrow

link
brightness_4
code

var my_date = $( "#my_calendar" ).datepicker( "getDate" );

chevron_right


We will use this to get the dates selected by the user.
Now we will give the user two calendars to select the start date and end date.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
    <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 src=
        </script>
        <script src=
        </script>
        <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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : mayeshmohapatra