how to show a jquery datepicker on button click

Question

I want to show a datepicker only on button click

$(\"#day\").datepicker();

the above l

Answer 1

You can attach a button as a trigger to the jQuery DatePicker as mentioned below,

<script type="text/javascript>"
  $( function() {
      $( "#datepicker" ).datepicker({
          showOn: "button",
          buttonImage: "https://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
          buttonImageOnly: true,
          buttonText: "Select date"
      });
    });
    </script>

Click on the following link for a working fiddle example

https://jsfiddle.net/anjanasilva/rtt25a1m/

Answer 2

You need to initialize datepicker for your input field first

$('#input_filed').datepicker();

Then you need add trigger for button

$('#button').click(function() {
      $('#input_filed').datepicker('show');
});

Answer 3

Try putting

$("#hiddenField").datepicker({
    showOn: 'button',
    buttonText: 'Choose Date',
    dateFormat: 'dd/mm/yy',
    constrainInput: true
});

in $(document).ready(function(){}); function.

Hope this helps.

Answer 4

try following :

$("#day").click(function() {
        $("#hiddenField").datepicker("show");
    });

single quotes doesn't work.

hope this helps.

Answer 5

You can do this with the built-in showOn function:

$( "#hiddenField" ).datepicker({
    showOn: "button",
    buttonText: "day"
});

JSFiddle: http://jsfiddle.net/Uv8V4/

Reference: http://jqueryui.com/datepicker/#icon-trigger