Question

jQueryUI有一个很好的DatePicker with icon trigger（日历图标打开日历，与Outlook类似的行为）。

另一方面，Bootstrap 3's Input Groups非常适合将图标连接到输入字段。

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

我做了JSFiddle here。对于“开始日期”，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个赞成票）。它只能通过偶然的副作用起作用。

在点击事件中有一个DOM就绪处理程序。这没有意义，因为它什么都不做（或者它至少应该在点击处理程序之外）

每次点击图标时都会重新初始化datepicker

更正的版本应如下所示：

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

仅初始化datepicker一次

单击图标时会引起对输入的关注（触发日历）。

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

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

$(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，如果是这样，这里是解决方案。 Demo JSFiddle

JS：

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

Answer 3

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

HTML Label Element（）表示用户界面中项目的标题。它可以通过将控制元素放在元素内部或使用for属性与控件相关联。

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

for属性的值将是可标记的表单相关元素的ID，例如for。据我所知，它将集中于您的输入，因为输入已经使用日期选择器触发。所以，工作已经完成。

input

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

Answer 4

$("#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>

Answer 5

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

$(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');
    });

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

5 个答案:

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