如何将 jQuery UI DatePicker 图标触发器与 Bootstrap 3 的输入组结合使用

Posted 2023-05-07

【中文标题】如何将 jQuery UI DatePicker 图标触发器与 Bootstrap 3 的输入组结合使用

【英文标题】：How to combine the jQueryUI DatePicker's Icon Trigger with Bootstrap 3's Input Groups

【发布时间】：2013-10-26 23:50:19

【问题描述】：

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>

【问题讨论】：

这个页面有你的答案***.com/questions/7733904/…

【参考方案1】：

四处寻找datepicker 问题的解决方案我很震惊地看到有这么多问题的公认答案（以及 10 个赞成票）。它只能通过偶然的副作用起作用。

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

修正后的版本应该是这样的：

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

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

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();
  );
);

【讨论】：

如果我有 2 个日期选择器输入，我是否分别初始化它们？我的意思是像 $("#datepicker-A").datepicker();和 $("#datepicker-B").datepicker();跟随 2 个焦点

@user1166085：使用 class 选择器而不是显示的 ID 选择器，只要 focus( ) 在点击处理程序中定位与 this 相关的元素。在上面添加示例

很好的解决方案！谢谢！

【参考方案2】：

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

JS：

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

【讨论】：

对一个有这么多问题的答案的 10 次投票是相当令人印象深刻的。这只适用于意外的副作用。此代码在每次单击按钮时重新创建日期选择器，并在 单击事件内有一个冗余的文档就绪处理程序！ 认真的家伙？ 10 票？ :)

【参考方案3】：

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

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/

【讨论】：

简直是最好的办法！好主意！ +1

JSFiddle 与上面的示例不匹配（例如，它甚至没有 label 并且不起作用）。你能更新一个工作示例吗？

@AdaroMu：剪切和粘贴我自己的工作的JSFiddle 完全（包括我注释掉的行等）不是我想要的你的工作答案:)我们称之为剽窃。请接受我的-1，直到您添加自己的答案。

@GoneCoding 对不起，我把它误认为是提问者的 jsfiddle。更改了 jsfiddle。

更好。工作正常。 +1 :)

【参考方案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>

【讨论】：

最好描述你在做什么以及展示示例。基本上，您在编辑控件的顶部覆盖了一个可点击的透明字体日历图标。简单整洁的 +1 :)

【参考方案5】：

下面的块将与 bootstrap 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');
    );