javascript - JQuery datepicker on click on label

Question

I want a JQuery datepicker to show when I click on a specific label. I have a HTML like this:

<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />

And some following JQueries like these:

$( function() {
   $( "#kezd_datum" ).datepicker({
         dateFormat:"yy-mm-dd"        
   });
} );

 $("#kezd_datum_label").click(function() {
     $("#kezd_datum").datepicker("show");
 });

And

$(document).ready(function() {
     $( "#kezd_datum" ).datepicker({
         dateFormat:"yy-mm-dd"        
     });

 $("#kezd_datum_label").click(function() {
     $("#kezd_datum").focus();
 });           
});

I tried to copy the codes from here jQuery datepicker on click of icon, and it was accepted and everyone says it works, but it does not for some reason. However, if I make input visible, the datepicker appears as it should. Just not if I click on that label.

If a put in a window.alert("something"); into any of the click functions, they also run and appear.

标签： javascriptjquerydatepicker

Answer 1

Try to replace display: none to opacity: 0;width: 0 to show the input and use for to point to your input.

$(document).ready(function() {
  $("#kezd_datum").datepicker();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<label for="kezd_datum" id="kezd_datum_label">Data</label><input style="opacity: 0; width: 0" id="kezd_datum" />