最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Bootstrap datepicker doesn't close - Stack Overflow

programmeradmin1浏览0评论

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.

<div class="input-group date insertInfo" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
 </div>

and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:

<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy'
        });
    });
</script>

Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

I have read that this bug was fixed but doesn't really seem so. I have a boostrap modal appearing when I create an new employee in my website. And I am using the following to create a datepicker for the date of birth of the new employee.

<div class="input-group date insertInfo" data-provide="datepicker">
    <input type="text" class="form-control">
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-th"></span>
    </div>
 </div>

and then after the load of my js scripts (first I load bootstrap and then bootstrap-datepicker.js) I use:

<script type="text/javascript">
    $(function () {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy'
        });
    });
</script>

Unfortunately what happens is that I can select the date on the drop down calendar shown by the datepicker, but once selected I cannot close it anymore. Can you maybe help me with this issue? Thanks in advance

Share Improve this question asked Dec 2, 2016 at 10:46 TartaTarta 2,0735 gold badges43 silver badges81 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

You must do the following:

  1. Correct your class reference
  2. Enable autoclose
  3. Override button

When you setup the datepicker, you are referencing a non-existant class ('.datepicker'). Besides that, you need to include the 'autoclose' field and customize the behaviour of the button to make it both open and close the calendar.

HTML

<div class="input-group date insertInfo" data-provide="datepicker">
  <input type="text" class="form-control">
  <div class="input-group-addon close-button">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

JS

// Setup datepicker

$('.date').datepicker({
  format: 'mm-dd-yyyy',
  autoclose: true
});

// Unbind default events

$('.close-button').unbind();

// Specify new behaviour

$('.close-button').click(function() {
  if ($('.datepicker').is(":visible")) {
    $('.date').datepicker('hide');
  } else {
    $('.date').datepicker('show');
  }
});

If you want to see a working version: JSFIDDLE

After selecting the date from the drop down calendar you can just click anywhere outside the calendar to close it but if you want the calendar to be closed on selecting the date then do the following

   $(function () {
            $('.date').datepicker({
                format: 'mm-dd-yyyy',
                autoclose: true
            })
        });
$('.datepicker').datepicker({
        format: 'mm/dd/yyyy',
        autoclose: true
    });

You will need to EXPLICITLY add autoclose: true, otherwise, its default value is false.

Bootstrap datepicker has autoclose option set on false by default. You should set autoclose option on true.

Check out the reference: https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference

发布评论

评论列表(0)

  1. 暂无评论