动态更新bootstrap 3 datepicker选项？

问题描述：

此日期选择它已与其他默认选项创建的，但我需要有以下新的选项，以更新它，它似乎并没有工作：动态更新bootstrap 3 datepicker选项？

// new options 
var new_options = { 
    format: 'dd/mm/yyyy', 
    autoclose: true, 
    language: 'es' 
} 

// update values 
$("#fecha_periodo").datepicker("update", new_options);

我也想更新一样daysOfWeekDisabled其他选项， viewMode等。

自举日期选择器之内的更新区域，它似乎很清楚，选项指定更新值。 https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#update – Cam

我看到它已经改变了数值，但没有改变 –

试试format选项。 https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format – Cam

答

不幸的是，没有API可以更改选项dinamically，所有可用的方法列出here（您可以使用setDaysOfWeekDisabled设置dinamically禁用星期几天）。

您可以使用destroy方法销毁datepicker实例并使用新选项重新构建它。

这里一个活生生的例子：

$('#datepicker').datepicker(); 
 

 
$('#btnChange').click(function(){ 
 
    var new_options = { 
 
    format: 'dd/mm/yyyy', 
 
    autoclose: true, 
 
    language: 'es' 
 
    } 
 
    // Save value 
 
    var value = $('#datepicker').datepicker('getDates'); 
 
    // Destroy previous datepicker 
 
    $('#datepicker').datepicker('destroy'); 
 
    // Re-int with new options 
 
    $('#datepicker').datepicker(new_options); 
 
    // Set previous value 
 
    $('#datepicker').datepicker('setDates', value); 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/locales/bootstrap-datepicker.es.min.js"></script> 
 

 
<input type="text" class="form-control" id="datepicker"> 
 

 
<button id="btnChange" class="btn btn-primary">Change option</button>

我正要换成日期选择器“v4”，但它似乎并不是一个官方网站，我不知道你是否观察到有很多bootstrap“datepickers”和“datetimepickers”网站让人们感到困惑并且不知道使用哪一个，我只使用bootstraps built-int。我感谢您的回答，并会使用该问候。 –

不幸的是，bootstrap本身不包含日期选择器，但有很多独立的日期选择器和引导主题。在我看来，最好的是eonasdan的[bootstrap-datetimepicker]（http://eonasdan.github.io/bootstrap-datetimepicker/）。它使用了momentjs，它有一个丰富的API，它有很好的文档。 – VincenzoC

动态更新bootstrap 3 datepicker选项？

相关推荐