JQuery datepicker点击标签答案

【问题标题】：JQuery datepicker on click on labelJQuery datepicker点击标签
【发布时间】：2018-05-03 14:26:39
【问题描述】：

我希望在单击特定标签时显示 JQuery 日期选择器。我有一个这样的 HTML：

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

还有一些像这样的JQuery：

$( 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 复制代码，它被接受了，每个人都说它有效，但由于某种原因它不起作用。但是，如果我使输入可见，日期选择器就会出现。如果我点击那个标签就不会。

如果将window.alert("something"); 放入任何点击函数中，它们也会运行并出现。

【问题讨论】：

您缺少执行功能。应该是 .focus() 而不是 .focus
是的，已修复。但还是不行。

标签： javascript jquery datepicker

【解决方案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" />

【讨论】：

工作，谢谢，不能接受，因为垃圾邮件保护。标签需要它但按钮不需要它的任何原因？

【解决方案2】：

好吧，我只是想澄清一下为什么您以前的代码不起作用以及如何使其起作用。

你正在做$("#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" />

【讨论】：