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 on click of icon，它已被接受，每个人都说它有效，但它不是出于某种原因。但是，如果我输入可见，则datepicker会按原样显示。如果我点击那个标签就行了。

如果将window.alert("something");放入任何点击功能，它们也会运行并显示。

Answer 1

尝试将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" />

Answer 2

好吧，我只是想澄清为什么你以前的代码没有工作以及如何使它工作。

隐藏$("#kezd_datum").focus();时，您正在执行div。因此，您无法专注于隐藏的元素。并再次显示该元素的datapicker。结果你一无所获。

您只需先显示它，然后显示datapicker，这样就可以了

干杯！

＆＃13;

$(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)
     
     
 });

＆＃13;

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

＆＃13;

点击标签上的JQuery datepicker

2 个答案: