Bootstrap datepicker不關閉

Question

我讀過這個bug已修復，但看起來並不如此。當我在我的網站上創建一個新員工時，我有一個助推器模式出現。我正在使用以下內容爲新員工的出生日期創建日期選擇器。

<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> 

再經過我的JS腳本的負載（第一我加載引導，然後引導-datepicker.js）我使用：

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

不幸的是發生什麼事，我可以選擇日期日期選擇器顯示的下拉日曆，但一旦選擇，我無法再關閉它。你能幫我解決這個問題嗎？在此先感謝

Answer 1

你必須做到以下幾點：

1. 正確類參考
2. 啓用自動關閉
3. 改寫按鈕

當設置的日期選擇器，你正在引用一個不存在的類（「.datepicker」）。除此之外，您需要包含'autoclose'字段並自定義按鈕的行爲以使其打開和關閉日曆。

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'); 
    } 
}); 

如果你想看到一個工作版本：JSFIDDLE

Answer 2

引導日期選擇器有autoclose選項設置假默認情況下。 您應該設置autoclose選項true。

退房參考：https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#quick-reference

Answer 3

選擇從下拉日曆上的日期後，你可以點擊日曆以外的任何位置將其關閉，但如果你想在日曆上選擇日期關閉然後做以下

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