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>
解决方法
为了寻找一个有关日期选择器问题的解决方案,我很震惊地看到有这么多问题的接受答案(以及10个赞成票).它只能通过偶然的副作用起作用.
>它在click事件中有一个DOM就绪处理程序.这没有意义,因为它什么都不做(或者至少应该在点击处理程序之外)
>它会在每次点击图标时重新启动日期选择器
更正后的版本应如下所示：
$(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();
});
});
