jQuery UI Datepicker setDate() Method

Last Updated : 20 Dec, 2023

jQuery UI datepicker setDate() method is used to set the date from the date field. The setDate method can be called by passing the default date you want to set. You can pass today as an argument to set the date with the current date.

Syntax:

$( ".selector" ).datepicker( "setDate" )

Parameters:

It accepts a parameter that sets the date to be shown.

Return values:

This method returns the date.

Example 1: The below code example implements the datepicker setDate method with a particular date to set.

HTML

<!doctype html>
<html lang = "en">
   <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1"> 
 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"> 
    </script> 
 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"> 
    </script> 
 
    <link href= 
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
             rel="stylesheet" type="text/css" /> 
 
      <script>
         $(function() {
            $( "#datepicker" ).datepicker();
            $( "#datepicker" ).datepicker("setDate","06/01/21");
         });
      </script>
   </head>
    
   <body>
      <p>Date: <input type = "text"
         id = "datepicker"></p>
   </body>
</html>

Output:

Example 2: The below method shows another way of calling the setDate method with datepicker and today argument.

HTML

<!doctype html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
 
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
 
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet"
          type="text/css" />
 
    <script>
        $(document).ready(() => {
            $("#datepicker").datepicker().
                datepicker("setDate", "today");
        });
    </script>
</head>
 
<body>
    <p>Date: <input type="text" id="datepicker"></p>
</body>
 
</html>