在输入点击和附加图标上触发jQuery datepicker元素

我有2个包含默认日期的输入字段，我正在使用jQuery的Datepicker插件从弹出式日历中选择日期。 当前，当用户单击字段时，将显示此日历。

这工作得很好，但是当用户也点击字段旁边的日历图标时，我还想触发日历的弹出窗口，所以我希望日历显示在两者上。

我正在使用Twitter Bootstrap 3。

以下是我目前的Jquery：

  $("#FromDate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, }); $("#ToDate").datepicker({ dateFormat: 'dd/mm/yy', changeMonth: true, changeYear: true, }); 

这就是我的页面看起来的样子

Answer 1

试试这个

 $("#FromDate").datepicker({ showOn: "button", changeMonth: true, changeYear: true, buttonImage: "../../images/calendar.png", buttonImageOnly: true, buttonText: "Select date", dateFormat: "dd/mm/yy" }); $("#ToDate").datepicker({ showOn: "button", changeMonth: true, changeYear: true, buttonImage: "../../images/calendar.png", buttonImageOnly: true, buttonText: "Select date", dateFormat: "dd/mm/yy" }); 

编辑引导程序

HTML

使用Javascript

  $(function () { $("#datepicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "dd/mm/yy" }).datepicker("setDate", new Date()); $('#btnPicker').click(function () { //alert('clicked'); $('#datepicker').datepicker('show'); }); });