CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
Kurkula
Kurkula

Reputation: 6762

Bootstrap date picker after selecting date not closing picker

After selecting date from bootstrap date picker the picker popup is not hiding. What may be the issue?

Here is my fiddle

<div class="form-group col-xs-6">
  <div class="input-group">
    <div class="input-group-addon flat">
                <div class="glyphicon glyphicon-calendar"></div>
    </div>
    <div class="col-sm-10">
      <input name="DATEFROM" id="dateFrom" type="text" class="form-control" />
    </div>
  </div>
</div>
$(document).ready(function() {

  $('#dateFrom').datepicker({
    format: "mm/dd/yyyy",
    orientation: "top"
  });

});

Upvotes: 2

Views: 8231

Answers (2)

Swimburger
Swimburger

Reputation: 7184

Simply hide the datapicker in the changedate event.

$(document).ready(function() {

  $('#dateFrom').datepicker({
    format: "mm/dd/yyyy",
    orientation: "top"
  }).on('changeDate', function(ev){
    $('#dateFrom').datepicker('hide');
  });

});

Upvotes: 2

arshovon
arshovon

Reputation: 13661

Add autoclose: true in datepicker function. The new jquery code is:

$(document).ready(function() {

  $('#dateFrom').datepicker({
   format: "mm/dd/yyyy",
   orientation: "top",
   autoclose: true
});

});

Here is the updated fiddle. https://jsfiddle.net/329suzv9/8/

Upvotes: 7

Related Questions