如何仅在使用 Jquery 的图标单击时显示日期选择器？答案

【问题标题】：How to show datepicker only on icon click using Jquery?如何仅在使用 Jquery 的图标单击时显示日期选择器？
【发布时间】：2018-11-24 06:38:54
【问题描述】：

我面临一个问题。我只需要在点击图标时显示 jquery datepicker。我在下面解释我的代码。

<input type="text" class="inputType2" id="car_d_date" value="">
<span class="globalcolor" id="calicon">
  <i class="icon-calendar-7"></i>
</span>

$(function(){
  $("#car_d_date").datepicker();
  $("#calicon").click(function(){
    $("#car_d_date").datepicker('show');
  })
})

在我的情况下，还输入字段单击日历显示。在这里，我需要当用户点击日历图标时，日历将显示并在文本框中查看选定的日期。

【问题讨论】：

初始化后隐藏日期选择器。 $("#car_d_date").datepicker('hide');
$("#car_d_date").datepicker("show");试试这个。

标签： javascript jquery html datepicker

【解决方案1】：

您可以将日期选择器的showOn属性值设置为空。

$("#car_d_date").datepicker({
  showOn: ''
});
$("#calicon").click(function(){
  $("#car_d_date").datepicker('show');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<input type="text" class="inputType2" id="car_d_date" value="">
<span class="globalcolor" id="calicon">
  <i class="icon-calendar-7">icon</i>
</span>

【讨论】：

大哥，再点击一下就关闭就好了。
@WC2 可以通过简单的代码来完成，但 datepicker 默认不这样做。当您单击输入日期选择器时仅显示，再次单击时它也显示并且它没有关闭
图标点击切换效果var i = 0; $("#calicon").click(function(){ console.log(i); if(i == 0){ $("#car_d_date").datepicker('show'); i++; } else { $("#car_d_date").datepicker('hide'); i--; } });