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

How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups

提问by bjornte

jQueryUI has a nice DatePicker with icon trigger(a calendar icon opens the calendar, similar behaviour to Outlook).

jQueryUI 有一个很好的带有图标触发器的 DatePicker（日历图标打开日历，类似于 Outlook 的行为）。

On the other hand, Bootstrap 3's Input Groupsare really nice for connecting icons to input fields.

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

Can the two be combined without rewriting either one?

可以将两者结合在一起而不重写任何一个吗？

I have made a JSFiddle here. For the ?Start Date? the jQueryUI icon trigger is not active. For the ?End Date? it is enabled. The DatePicker icon, unfortunately, appears outside of the End Date's Input Group:

我在这里做了一个JSFiddle。对于？开始日期？jQueryUI 图标触发器未激活。对于？结束日期？它已启用。不幸的是，DatePicker 图标出现在结束日期的输入组之外：

So, is it possible to enable the Icon Trigger as part of the Input Group (looking like ?Start Date? but behaving like ?End Date?) without heavy modification?

那么，是否可以在不进行大量修改的情况下启用图标触发器作为输入组的一部分（看起来像？开始日期？但行为像？结束日期？）？

Main Icon Trigger code:

主图标触发代码：

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

Main Input Group code:

主输入组代码：

<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>

回答by Gone Coding

Looking around for solutions to a datepickerproblem I was shocked to see an accepted answer with so many problems (and 10 upvotes). It only works by accidental side-effect.

环顾四周寻找datepicker问题的解决方案，我很震惊地看到一个被接受的答案有这么多问题（和 10 个赞成票）。它只能通过意外的副作用起作用。

• It has a DOM ready handler inside the click event. This is pointless as it does nothing (or it should at least be outside the click handler)
• It is reinitialising datepickeron every click of the icon

• 它在 click 事件中有一个 DOM 就绪处理程序。这是毫无意义的，因为它什么都不做（或者它至少应该在点击处理程序之外）
• 每次点击图标都会重新初始化datepicker

The corrected version should look like:

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

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

• Initialise datepicker once only
• Cause focus on the input when the icon is clicked (which fires up the calendar).

• 仅初始化一次日期选择器
• 当点击图标（启动日历）时，将焦点放在输入上。

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

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

Note: It is preferred nowadays to use the shortcut DOM ready handler, so the example would become:

注意：现在首选使用快捷方式 DOM 就绪处理程序，因此示例将变为：

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

Update to support multiple controls via class selectors:

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

Change the HTML to have identifiable classes and change the focus selectors to select the edit box relative to the button (within same input-group).

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

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

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

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

回答by Rahul Gupta

I think that you want to show up jquery ui datepicker on bootstrap icon trigger, if it is so here is the solution. Demo JSFiddle

我认为您想在引导程序图标触发器上显示 jquery ui datepicker，如果是这样，这里是解决方案。演示 JSFiddle

JS:

JS：

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

回答by AdaroMu

I prefer to use labeltag with forattribute to select the input field.

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

The HTML Label Element () represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the element, or by using the for attribute.

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

More details and examples: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

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

The value of forattribute will be the ID of a labelable form-related element, e.g. input. In my understand it will focus to your input, since the input already triggers with the date-picker. So, the work is done.

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/

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

回答by Jignesh Patel - Sr. HTML Dev.

$("#checkin").datepicker({
  dateFormat: 'dd/mm/yy',
  minDate: '0',
  changeMonth: true,
  numberOfMonths: 1
 });

.datedivmng{
    float: left;position: relative;
}
.datedivmng .datepicker{
    position: relative;width: 87%!important;
    cursor: pointer;
}
.datedivmng:after {
    /* symbol for "opening" panels */
    font-family: 'FontAwesome';
    content: "\f073";
    color: #329ac4;
    font-size: 16px;
    text-shadow: none;
    position: absolute;
    vertical-align: middle;
    pointer-events: none;
    float: right;
    top: 2px;
    right: 7px;
}

<div class="datedivmng">
  <input type="text" id="checkin" name="checkin"  value="" /></div>

回答by ank2k11

Below block will work with bootstrap 4, providing button trigger(not input focut) Output

下面的块将与引导程序 4 一起使用，提供按钮触发器（不是输入焦点） 输出

$(function () {
        $("#searchTextDOB").datepicker({
            showOn: "button",            
            buttonImageOnly: false,
            buttonText: ''
        }).next(".ui-datepicker-trigger").addClass("input-group-text btn-light fa fa-calendar-alt").
            wrapAll('<div class="input-group-append"></div');
    });