单击图标的jQuery datepicker答案

【问题标题】：jQuery datepicker on click of icon单击图标的jQuery datepicker
【发布时间】：2017-09-22 03:30:40
【问题描述】：

我想在单击输入字段内的 FontAwesome 图标时显示 jQuery 日期选择器。下面是代码：

<div class="col-md-4 col-sm-4 col-xs-12">
  <label for="datepicker">Date of birth*</label>
  <input type="text" name='datepicker' class="form-control"  value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
  <span class="fa fa-calendar"></span>
</div>

jQuery('.fa-calendar').on('click' , function() {
  jQuery(this).datepicker().trigger('focus');
});

【问题讨论】：

标签： jquery html date datepicker jquery-ui-datepicker

【解决方案1】：

试试这个

$(document).ready(function() {
  $("#datepicker").datepicker();
  $('.fa-calendar').click(function() {
    $("#datepicker").focus();
  });
});

只初始化一次日期选择器

这是一个例子

$(document).ready(function() {
  $("#datepicker").datepicker();
  $('.fa-calendar').click(function() {
    $("#datepicker").focus();
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col-md-4 col-sm-4 col-xs-12">
  <label for="datepicker">Date of birth*</label>
  <input type="text" name='datepicker' class="form-control"  value="Select date" id="datepicker" ng-required="true" placeholder="MM/DD/YYYY" >
  <span class="fa fa-calendar"></span>
</div>

【讨论】：

如何在全球范围内为所有日期选择器执行此操作？我想知道为此目的填充日期选择器是否是个好主意？
Brilliant ...由于我的 jQuery 版本，我不得不编写“.trigger('focus')” 而不仅仅是“.focus()”，但无论如何，“focus”都能解决问题我……我在各种 SO 帖子中遇到的所有其他解决方案都不适合我！

【解决方案2】：

 <script>
   $(document).on('click',".calendar",function(){
         $("#datepicker").datepicker("show");
     });    
 </script>

【讨论】：

请不要提交没有任何解释为什么以及如何解决问题的代码块。
这对我有用，但它有一个令人讨厌的副作用，即我的日期弹出窗口在它出现后的几分之一秒内消失了（我现在意识到这可能是由于“点击”事件级联到父元素，所以“event.stopPropagation()”可能已经修复了）

【解决方案3】：

  $( function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "icono",
showOn: "both"
    });
  } );

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.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>
 
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

【讨论】：

【解决方案4】：

你要在输入框上触发日期选择器，而不是图标，所以你需要改变

jQuery(this).datepicker().trigger('focus');`

成为

jQuery("#datepicker").datepicker().trigger('focus');

【讨论】：

【解决方案5】：

您可以使用日期选择器上的'open' 设置以编程方式打开它。无需触发focus 事件。您还需要在#datepicker 元素上调用datepicker() 方法，而不是单击的图标。试试这个：

jQuery(function($) {
  $('#datepicker').datepicker();

  $('.fa-calendar').on('click', function() {
    $('#datepicker').datepicker('open');
  });
});

【讨论】：

【解决方案6】：

HTML

<div class="col-md-4 col-sm-4 col-xs-12">
<label for="datepicker">Date of birth*</label>
<input type="text" name='datepicker' class="form-control"  value="Select 
 date" id="datepicker_val" ng-required="true" placeholder="MM/DD/YYYY" >
        <span class="fa fa-calendar"></span>
</div>

JS

jQuery(".fa-calendar").datepicker();

这就是你想要做的。它会起作用，您可以在输入类型中填写日期，如下所示。

jQuery(".fa-calendar").datepicker().on('changeDate', function(ev){

            jQuery("#datepicker_val").val(ev.date.valueOf());

        }
    });

【讨论】：

【解决方案7】：

jQuery('.fa-calendar').on('click' , function() { 
    event.preventDefault();
    $('#startdate').click(); 
});

希望这会奏效...！！

【讨论】：