How to open datepicker on button click jquery-CodePudding

I am working on Jquery,Right now i am getting "datepicker" on "input type text",but i want to display that datepicker on button click,how can i do this ? Here is my current code

<head>
<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-git.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Initialize the datepicker and display a button panel underneath the calendar.</title>
</head>
<body>
<p>Pick a date:</p>   
<p><input type="text" id="datepicker1" /></p> 
<button id="bt">Date</button>
</body>


<script>
 $('#bt').click(function(){
        $( "#datepicker1" ).datepicker({
    showButtonPanel: true
});
});
</script>

CodePudding user response：

use this code for open a date picker on click

$("#bt").click(function() {
        $(this).datepicker().datepicker( "show" )
    });

CodePudding user response：

use this code for open a date picker on button click

$(document).ready(function () {
    $("#txtdate").datepicker({
        showOn: "button",
        buttonText: "Select date"
    });
    
});

<html>
<head>
    <title>DatePicker</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    
</head>
<body>
    Date :
    <input id="txtdate" type="text">
</body>
</html>