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');
});
});