Update bootstrap 3 datepicker options dynamically?

Question

This datepicker it is already created with other default options, but I need to update it with the following new options and it does not seem to work:

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

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

I would also like to update other options like daysOfWeekDisabled, viewMode and so on.

user_11995725 · Answer

You can find all about new version (Bootstrap 3 Datepicker v4 Docs) at https://eonasdan.github.io/bootstrap-datetimepicker/.

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

Sorry for my poor english please :)

user_11572404 · Answer

Here I have a hacking solution that works for me to change the datepicker options dynamically after I initiate a bootstrap datepicker object.

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

In this case. I apply a class to a range of dates on the datepicker.

I use the "non public" datepicker method '_process_options' to change intern datepicker methods.

With this method I can change all the options of the datepicker instance because the '_process_options' has no method validator.

Also I use the method 'update' bacause the dobbleclick bug: bootstrap datepicker, beforeShowDay works after second click

Update bootstrap 3 datepicker options dynamically?

3 Answers