动态更新 bootstrap 3 日期选择器选项?

2024-05-07

该日期选择器已经使用其他默认选项创建,但我需要使用以下新选项更新它,但它似乎不起作用:

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

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

我还想更新其他选项,例如daysOfWeekDisabled, viewMode等等。


不幸的是,没有 API 可以动态更改选项,列出了所有可用的方法here https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html(您可以使用setDaysOfWeekDisabled https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setdaysofweekdisabled动态设置禁用的星期几)。

您可以使用destroy https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

动态更新 bootstrap 3 日期选择器选项? 的相关文章