代码之家 › 专栏 › 技术社区 › kry

单击标签上的JQuery datepicker

datepicker jquery javascript

kry · 技术社区 · 6 年前

我希望在单击特定标签时显示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 ,它被接受了,每个人都说它有效,但由于某些原因,它并没有起作用。但是,如果我使输入可见,则datepicker将按其应有的方式显示。如果我点击那个标签就不会了。

如果a放入a window.alert("something"); 在任何单击功能中,它们也会运行和显示。

2 回复 | 直到 6 年前

Tan Duong 6 年前

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

Muhammad Usman 6 年前

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

你在做什么 $("#kezd_datum").focus(); 而你 div 已隐藏。所以你不能专注于一个隐藏的元素。和显示 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" />