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 textbox 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=
ui-lightness/jquery-ui.css'
        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




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.