CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
user3109801
user3109801

Reputation: 39

Bootstrap datepicker icon

My html code is:

 <div class="input-group">
  <input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
  <span class="input-group-addon"> <i class="icon-calendar"></i> </span>
 </div>

JS:

$('.date-picker').datepicker();

When I click on icon datepicker is not showing. It shows when I click on input field.

How to make datepicker visible when I click on icon.

Upvotes: 1

Views: 4119

Answers (3)

Vivek Gupta
Vivek Gupta

Reputation: 2814

The best way out here would be to add a class, lets say "date" to the containing div, and add the datepicker functionality on that div, like:

<div class="input-group date">
  <input type="text" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
  <span class="input-group-addon"> <i class="icon-calendar"></i> </span>
</div>

JS:

$('.date').datepicker();

Upvotes: 3

McTalian
McTalian

Reputation: 395

Your input field has the class date-picker whereas your icon does not.

Adding that class might give you the desired behavior, though if you have styling specific to that class, it may affect your icon as well.

Upvotes: 0

Neil
Neil

Reputation: 32

Try this working code example below and tell me if this works

<div class="input-append date" id="datepicker" data-date="dateValue: Customer.DateOfBirth" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" data-bind="value: Customer.DateOfBirth" readonly="readonly">
<span class="add-on"><i class="icon-calendar"></i></span>

Upvotes: 0

Related Questions