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（您可以使用setDaysOfWeekDisabled来设置禁用的星期几。）

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

这是一个实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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','')

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

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

使用这种方法，我可以更改 datepicker 实例的所有选项，因为“_process_options”没有方法验证器。

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

动态更新bootstrap 3 datepicker选项？

3 个答案: