CODEWITHSUNDEEP
twitter-bootstrapdatepicker
pietà
pietà

Reputation: 770

How to make bootstrap datepicker appear onclick on input field and icon at the same time?

I'm using datepicker of bootstrap and I'm trying to make the pop up appear whenever I click on the icon or in the input field

I'm using bootstrap3 :datepicker docs

this is my script :

 $(function () {
        $('#start-date').datetimepicker({
            viewMode: 'years',
            format: 'MM-YYYY'
        });

and html:

 <div class="col-lg-4">
                        <label for="start-date">Start Date</label>
                        <div class="input-group date">
                            <input class="form-control" type="text" value="{{ start_date }}"
                                   id="start-date">
                            <span class="input-group-addon"><i class='fa fa-calendar'></i></span>
                        </div>
                    </div>

Upvotes: 1

Views: 9307

Answers (3)

BeNice
BeNice

Reputation: 2305

Simples - use a class! (This may NOT work for you! Please see * below.)

HTML =

<div class="input-group date fooClass" id="startTime">
  <!-- style="position: relative"-->
  <input class="form-control fooClass" id="startTime1" type="text" name="startTime">
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-time"></i>
  </span>
</div>

JS = 

<script>
  $('.fooClass').datetimepicker({
      format: 'LT',
      keepOpen: true
  });
</script>

Worked for me but I have a slightly weird download. I could not find the "current" download at http://eonasdan.github.io/bootstrap-datetimepicker/ so I downloaded the CDN sources they were using.

* I am using latest Bootstrap 3 (not 4) and jQuery v3.4.1 . There are all sorts of versions of bootstrap-datetimepicker out there and different versions require different jQuerys. So this may not work for you.

PS Just looked and they are using JQ v2.1.1 so guess I got lucky that anything works!

Upvotes: 0

piet&#224;
piet&#224;

Reputation: 770

I found a solution :

this worked for me 

<div class="col-lg-4">
   <label for="start-date">Start Date</label>
   <div class="input-group date">
      <input class="form-control" type="text" value="{{ start_date }}"
                               id="start-date">
            <label class="input-group-addon" for="start-date"><i class='fa fa-calendar'></i></label>
    </div>
</div>

Upvotes: 3

sleakerz
sleakerz

Reputation: 169

you can trigger the click and then show the datepicker like this, if i understood well : 

$('#start-date').click(function () {
    $('#myField').datepicker("show");
});

Upvotes: 3

Related Questions