jQuery UI datepicker option() Method

Last Updated : 02 Dec, 2021

jQuery UI datepicker option(optionName, value) method is used to set the value of the button option associated with the specified optionName.

Syntax:

$( ".selector" ).datepicker( "option", "disabled", true )

Parameters:

optionName: Option to be checked.
value: Value to be checked

Return values: This method returns an object value.

Approach: First, add jQuery UI scripts needed for your project.

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <link href= 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
              rel="stylesheet" /> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"> 
      </script> 
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
      </script> 
  
        <script> 
            $(function () { 
                $("#gfg").datepicker(); 
                $("#gfg").datepicker("option", "enable", true); 
            }); 
        </script> 
    </head> 
  
    <body> 
        <p>Enter Date: <input type="text" id="gfg" /></p> 
    </body> 
</html> 

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8" /> 
        <link href= 
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
              rel="stylesheet" /> 
        <script src="https://code.jquery.com/jquery-1.10.2.js"> 
      </script> 
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
      </script> 
  
        <script> 
            $(function () { 
                $("#gfg").datepicker(); 
                $("#gfg").datepicker("option", "disabled", true); 
            }); 
        </script> 
    </head> 
  
    <body> 
        <p>Enter Date: <input type="text" id="gfg" /></p> 
    </body> 
</html> 