10

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

5 回答 5

23

环顾四周寻找问题的解决方案，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 就绪处理程序，因此示例将变为：

$(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();
  });
});
于 2016-02-19T09:52:09.270 回答
7

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

JS：

$('#btn').click(function(){
    //alert('clicked');
    $(document).ready(function(){
        $("#datepicker-my").datepicker().focus();
    });
});
于 2013-10-18T11:51:10.557 回答
4

我更喜欢使用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/

于 2015-10-29T00:23:43.453 回答
1 

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

于 2015-11-17T06:02:18.270 回答
0

下面的块将与引导程序 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');
    });
于 2019-05-23T14:23:04.523 回答