在输入点击和附加图标上触发jQuery datepicker元素 [英] Trigger jQuery datepicker element on both input click and add-on icon
本文介绍了在输入点击和附加图标上触发jQuery datepicker元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有两个输入字段包含默认日期,我使用jQuery的Datepicker插件从一个弹出日历中选择一个日期。目前,当用户点击< input>
字段时,会显示此日历。
I have 2 input fields containing a default date and I'm using jQuery's Datepicker plugin to select a date from a pop-in calendar. Currently this calendar is displayed when the user clicks on the <input>
field.
当用户还点击字段旁边的日历图标时,我还要触发日历的弹出式窗口,因此我希望日历显示在两者上。
This is working great but I'd like to also trigger the calendar's pop-in when the user also clicks on the calendar icon which is next to the field so I want the calendar to be displayed on both.
我使用Twitter Bootstrap 3。
I am using Twitter Bootstrap 3.
以下是我目前的Jquery:
Below is my current Jquery:
$("#FromDate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
});
$("#ToDate").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
});
这是我的页面的样子
推荐答案
试试这个
$("#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
<div class="col-lg-3">
<div class="input-group">
<input type="text" class="form-control" id="datepicker">
<span class="input-group-btn">
<button type="button" class="btn btn-default" id="btnPicker">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<!-- /input-group -->
</div>
Javascript
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "dd/mm/yy"
}).datepicker("setDate", new Date());
$('#btnPicker').click(function () {
//alert('clicked');
$('#datepicker').datepicker('show');
});
});
这篇关于在输入点击和附加图标上触发jQuery datepicker元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文