动态更新Bootstrap 3 DatePicker选项

Question

此datePicker已使用其他默认选项创建，但是我需要使用以下新选项进行更新，并且似乎不起作用：

// 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更改dinamable，所有可用的方法都在此处列出(您可以使用setDaysOfWeekDisabled进行一次dinamand diinamation nake distabled(。

您可以使用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>

Answer 2

您可以在https://eonasdan.github.io/bootstrap-datementimentimettimepicker/上找到有关新版本(Bootstrap 3 DatePicker V4 Docs(的所有信息。

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 DatePicker对象后动态更改datepicker选项。

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

在这种情况下。我在datepicker上的一系列日期应用一类。

我使用"非公共"datepicker方法'_process_options'更改实习datepicker方法。

使用此方法，我可以更改datePicker实例的所有选项，因为" _process_options"没有方法验证器。

我也使用方法'update'bacause dobbleclick错误：bootstrap datepicker，beforeshowday在第二次单击后工作