如何将jQueryUI DatePicker的图标触发器与Bootstrap 3的输入组相结合
jQueryUI有一个带有图标触发器的漂亮DatePicker （日历图标打开日历，与Outlook类似的行为）。
另一方面， Bootstrap 3的输入组非常适合将图标连接到输入字段。
这两者可以合并而不重写任何一个吗？
我在这里做了一个JSFiddle 。 对于“开始日期”，jQueryUI图标触发器未激活。 对于«结束日期»，它已启用。 遗憾的是，DatePicker图标出现在结束日期的输入组之外：
那么，是否可以将图标触发器作为输入组的一部分（看起来像“开始日期”，但表现得像“结束日期”）而无需大量修改？
主图标触发代码：
$("#datepicker-end").datepicker({ showOn: "button", buttonImage: "img/calendar.gif", buttonImageOnly: true }); 主输入组代码：
为了寻找一个有关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 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(); }); });
我想你想在bootstrap图标触发器上显示jquery ui datepicker，如果是这样的话就是解决方案。 演示JSFiddle
JS：
$('#btn').click(function(){ //alert('clicked'); $(document).ready(function(){ $("#datepicker-my").datepicker().focus(); }); });
我更喜欢使用带有for属性的label标签来选择输入字段。
HTML Label Element（）表示用户界面中项目的标题。 它可以通过将控制元素放在元素内部或使用for属性与控件相关联。
更多细节和示例： https ： //developer.mozilla.org/en-US/docs/Web/HTML/Element/label
for属性的值将是可变forms相关元素的ID，例如input 。 据我所知，它将集中于您的输入，因为输入已经使用日期选择器触发。 所以，工作已经完成。
JSFiddle： https ：//jsfiddle.net/om01kgk5/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; }