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

Question

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

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

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

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

Answer 1

不幸的是，没有 API 动态更改选项，列出了所有可用的方法 here (you can use setDaysOfWeekDisabled 以禁用动态设置星期几）。

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

这是一个活生生的例子：

$('#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>

Answer 2

您可以在 https://eonasdan.github.io/bootstrap-datetimepicker/ 找到所有关于新版本的信息（Bootstrap 3 Datepicker v4 文档）。

let new_options = {
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    },
    format: 'DD/MM/YYYY',
    date: new Date()
}

if(condition1){
        new_options.daysOfWeekDisabled = [0,2,3,4,5,6];
        new_options.viewMode = 'years';
        new_options.format = 'MM/YYYY';
    }else(condition2){
        new_options.viewMode = 'years';
        new_options.format = 'YYYY';
    }
    // Destroy previous datepicker
    $('.datetimepicker').data("DateTimePicker").destroy();
    // Re-int with new options
    $('.datetimepicker').datetimepicker(new_options);

抱歉我的英语不好:)

Answer 3

这里我有一个黑客解决方案，可以在我启动 bootstrap 日期选择器对象后动态更改日期选择器选项。

var id = "MyDatepicker"
var beginDate = new Date();
var endDate =  new Date(2022, 11, 17, 3, 24, 0);

function myCallBack(date) {
    if ((beginDate <= date) && (date <= endDate)){
        return {classes: 'activeClass'};
    }
    return;
}

$('#' + id ).datepicker({
    startDate: new Date(),
    language: 'en'
});

$('#' + id ).datepicker('_process_options', {
    beforeShowDay: function(date) {
        return myCallBack(date);
    }
}).datepicker('update','')

在这种情况下。我将 class 应用于日期选择器上的一系列日期。

我使用“非 public”日期选择器方法“_process_options”来更改实习生日期选择器方法。

使用此方法我可以更改日期选择器实例的所有选项，因为“_process_options”没有方法验证器。

我也使用方法 'update' 因为 dobbleclick 错误：bootstrap datepicker, beforeShowDay works after second click

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

Update bootstrap 3 datepicker options dynamically?

jquery

twitter-bootstrap-3

bootstrap-datepicker