bootstrap datepicker not able to click on icon - datepicker

Question

If I click on input text box, bootstrap calenar opend, the con is not clickable. Could someone help ?
</div>
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" id="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
JSFIDDLE

Answer 1

Simply add class btn to this:
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i></span>

Answer 2

pur the id in parent class. see code below:
<div id="ARDT" class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>

Answer 3

Maybe someone need it...
$('.glyphicon-calendar').on('click',function(){
$('#ARDT').focus();
});

Answer 4

This is a working combination of the above answers.
You need to add the 'btn' class to make the glyphicon clickable.
You need to add 'datepicker' class so you can call in in the jquery.
You need to create a jquery click event for the 'datepicker' class.
<div class="input-group datepicker">
<input type='text' class="form-control" id='datepicker2'/>
<span class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
//this is to make the calendar glyphicon clickable
$('.datepicker').click(
function () {
$(this).datepicker('show');
}
);

Answer 5

<div class="input-group date datepicker">
<input type="text" class="form-control" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
and then
$('.datepicker').off('focus').datepicker().click(
function () {
$(this).datepicker('show');
}
);
This works fine.