JQuery datepicker trigger element for both input and add-in
I have 2 input fields containing a default date and I am using the jQuery Datepicker plugin to select a date from a popup calendar. Currently, this calendar is displayed when the user clicks on the field <input>
.
This works great, but I would also like to trigger the calendar popup when the user also clicks on the calendar icon that is next to the field, so I want the calendar to appear 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 what my page looks like
+3
source to share
1 answer
try it
$("#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');
});
});
+8
source to share