JQuery DatePicker при нажатии на ярлык

Question

Я хочу, чтобы указатель даты JQuery отображался при нажатии на определенную метку. У меня есть такой HTML-код:

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

И некоторые следующие JQueries, подобные этим:

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

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

И

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

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

Я попытался скопировать коды отсюда jQuery datepicker по щелчку значка , и он был принят, и все говорят, что это работает, но это не по какой-то причине. Однако, если я сделаю ввод видимым, средство выбора даты будет выглядеть так, как должно. Только если я не нажму на этот ярлык.

Если вставить window.alert("something"); в любую из функций щелчка, они также запускаются и появляются.

Answer 1

Ну, я просто хочу уточнить, почему ваш предыдущий код не работал и как заставить его работать.

Вы делаете $("#kezd_datum").focus();, пока вы div скрыты. Таким образом, вы не можете сосредоточиться на скрытом элементе. И снова показывает datapicker для этого элемента. В результате вы ничего не получили.

Вам просто нужно сначала показать его, а затем показать datapicker, и это будет работать

Ура!

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


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

 $("#kezd_datum_label").click(function() {
    $("#kezd_datum").show().focus();
    setTimeout(()=>{
    $("#kezd_datum").datepicker("show");
    },20)
     
     
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" />
<label id="kezd_datum_label">Data</label><input style="display:none;" id="kezd_datum" />

Answer 2

Попробуйте заменить display: none на opacity: 0;width: 0, чтобы показать ввод, и используйте for, чтобы указать на ваш ввод.

$(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" />