如何将jQueryUI DatePicker的图标触发器与Bootstrap 3的输入组相结合

Question

jQueryUI有一个很好的DatePicker带图标触发器(日历图标打开日历,类似于Outlook的行为).

另一方面,Bootstrap 3的输入组非常适合将图标连接到输入字段.

两者可以合并而不重写其中任何一个吗？

我在这里做了一个JSFiddle.对于"开始日期",jQueryUI图标触发器未激活.对于«结束日期»,它已启用.遗憾的是,DatePicker图标出现在结束日期的输入组之外:

那么,是否可以将图标触发器作为输入组的一部分(看起来像"开始日期",但行为类似«结束日期»)而无需大量修改？

主图标触发代码:

$("#datepicker-end").datepicker({
showOn: "button",
buttonImage: "img/calendar.gif",
buttonImageOnly: true
});

主输入组代码:

<div class="input-group">
<input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>

Answer 1

寻找datepicker问题的解决方案我很震惊地看到有这么多问题的接受答案(以及10个赞成票).它只能通过偶然的副作用起作用.

• 它在click事件中有一个DOM就绪处理程序.这没有意义,因为它什么都不做(或者它至少应该在点击处理程序之外)
• 它会在每次点击图标时重新初始化datepicker

更正后的版本应如下所示:

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

• 仅初始化datepicker一次
• 单击图标时会引起对输入的关注(触发日历).

JSFiddle: http ://jsfiddle.net/TrueBlueAussie/JHBpd/151/

注意:现在首选使用快捷方式DOM ready处理程序,因此示例将变为:

$(function() {
  $("#datepicker-my").datepicker();
  $('#btn').click(function() {
    $("#datepicker-my").focus();
  });
});

更新以通过类选择器支持多个控件:

将HTML更改为具有可识别的类并更改焦点选择器以选择相对于按钮的编辑框(在同一输入组内).

JSFiddle: http ://jsfiddle.net/JHBpd/260/

$(function() {
  $(".datepicker-my").datepicker();
  $('.btn').click(function() {
    $(".datepicker-my", $(this).closest(".input-group")).focus();
  });
});

Answer 2

我想你想在bootstrap图标触发器上显示jquery ui datepicker,如果是这样的话,这就是解决方案.演示JSFiddle

JS:

$('#btn').click(function(){
    //alert('clicked');
    $(document).ready(function(){
        $("#datepicker-my").datepicker().focus();
    });
});

Answer 3

我更喜欢使用label带有属性的标签for来选择输入字段。

HTML 标签元素 () 表示用户界面中项目的标题。可以通过将控件元素放置在元素内或使用 for 属性来将其与控件关联。

更多详细信息和示例：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

属性的值for将是可标记的表单相关元素的ID，例如input。据我了解，它将重点关注您的输入，因为输入已经通过日期选择器触发。这样，工作就完成了。

 <div class="input-group">
   <input type="text" id="datepicker-start" class="form-control" placeholder="Start Date" />    
   <label class="input-group-addon" for="datepicker-start">
     <span class="glyphicon glyphicon-calendar"></span>
   </label>
 </div>

JSFiddle：https://jsfiddle.net/om01kgk5/1/