在输入点击和附加图标上触发jQuery datepicker元素 [英] Trigger jQuery datepicker element on both input click and add-on icon
问题描述
< input>
字段时,将显示此日历。 这是非常好的,但是当用户还点击该字段旁边的日历图标时,我也想触发日历的弹出窗口,所以我希望日历在两者之间显示。
我正在使用Twitter Bootstrap 3。
以下是我目前的Jquery:
code> $(#FromDate)。datepicker({
dateFormat:'dd / mm / yy',
changeMonth:true,
changeYear:true,
});
$(#ToDate)。datepicker({
dateFormat:'dd / mm / yy',
changeMonth:true,
changeYear:true,
});
这是我的页面看起来如何
尝试这个
$(#FromDate)。datepicker({
showOn:按钮,
changeMonth:true,
changeYear:true,
buttonImage:../../images/calendar.png,
buttonImageOnly:true,
buttonText:选择日期,
dateFormat:dd / mm / yy
});
$(#ToDate)。datepicker({
showOn:button,
changeMonth:true,
changeYear:true,
buttonImage :../../images/calendar.png,
buttonImageOnly:true,
buttonText:选择日期,
dateFormat:dd / mm / yy
});
为引导编辑
Html
< div class =col-lg-3>
< div class =input-group>
< input type =textclass =form-controlid =datepicker>
< span class =input-group-btn>
< button type =buttonclass =btn btn-defaultid =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' ){
// alert('clicked');
$('#datepicker')。datepicker('show');
});
} );
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.
I am using Twitter Bootstrap 3.
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,
});
And this is how my page looks
Try this
$("#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"
});
Edit for bootstrap
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屋!