twitter bootstrap - Trigger jQuery datepicker element on both input click and add-on icon -

twitter bootstrap - Trigger jQuery datepicker element on both input click and add-on icon -

i have 2 input fields containing default date , i'm using jquery's datepicker plugin select date pop-in calendar. calendar displayed when user clicks on <input> field.

this working great i'd trigger calendar's pop-in when user clicks on calendar icon next field want calendar displayed on both.

i using twitter bootstrap 3.

below current jquery:

$("#fromdate").datepicker({ dateformat: 'dd/mm/yy', changemonth: true, changeyear: true, }); $("#todate").datepicker({ dateformat: 'dd/mm/yy', changemonth: true, changeyear: true, });

and how 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 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 twitter-bootstrap calendar datepicker