如何为 Datetimepicker 设置默认设置？答案

【问题标题】：How do I set default settings for Datetimepicker?如何为 Datetimepicker 设置默认设置？
【发布时间】：2017-02-11 14:19:17
【问题描述】：

我使用 Bootstrap Datetimepicker 设置了多个日历输入：http://eonasdan.github.io/bootstrap-datetimepicker/。

我创建了一个包含一些覆盖的对象：

DatetimepickerDefaults = {
    icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: ' fa fa-angle-up',
        down: 'fa fa-angle-down',
        previous: 'fa fa-angle-left',
        next: 'fa fa-angle-right',
        today: 'fa fa-crosshairs',
        clear: 'fa fa-trash',
        close: 'fa fa-times'
    }
}

我想应用于所有日历输入。所以现在当我想初始化一个插件时，我会写：

$('#datetimepicker1').datetimepicker(DatetimepickerDefaults);

问题是一些输入需要有一些特殊的设置，比如格式：'LT'，所以当我初始化它们时，我写：

$('#datetimepicker3').datetimepicker({
    icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: ' fa fa-angle-up',
        down: 'fa fa-angle-down',
        previous: 'fa fa-angle-left',
        next: 'fa fa-angle-right',
        today: 'fa fa-crosshairs',
        clear: 'fa fa-trash',
        close: 'fa fa-times'
    },
    format: 'LT'
});

所以我不得不再次重复这个默认设置。有什么方法可以将所有插件实例设为默认值？

【问题讨论】：

这样的流派有多少？
@webmaster，有十几个独特的设置。

标签： html css twitter-bootstrap bootstrap-datetimepicker

【解决方案1】：

您可以将其设置为如下函数：

function.DatetimepickerDefaults = function(field, value) {
    var retVal = {
    icons: {
        time: 'fa fa-clock-o',
        date: 'fa fa-calendar',
        up: ' fa fa-angle-up',
        down: 'fa fa-angle-down',
        previous: 'fa fa-angle-left',
        next: 'fa fa-angle-right',
        today: 'fa fa-crosshairs',
        clear: 'fa fa-trash',
        close: 'fa fa-times'
    }};
    if (field) {
        retVal[field] = value;
    }
    return retVal;
}

并像这样使用它：

$('#datetimepicker1').datetimepicker(DatetimepickerDefaults());
$('#datetimepicker2').datetimepicker(DatetimepickerDefaults("format", "LT"));
$('#datetimepicker2').datetimepicker(DatetimepickerDefaults("format", "LT2"));
//And etc...

您可以使用列表获取更多值，希望对您有所帮助

【讨论】：

【解决方案2】：

这是@webmaster 的answer 的更紧凑、更方便的版本，利用了jQuery.extend() 方法。

// defaults
function DatetimepickerDefaults(opts) {
    return $.extend({},{
        sideBySide: true,
        ignoreReadonly: true,
        showClose: true,
        toolbarPlacement: 'top'
    }, opts);
}

// usage
$('#datetimepicker2').datetimepicker(DatetimepickerDefaults({
    sideBySide: false,
    showClear: true
}));

您可以再次提供设置对象，这些设置将与默认设置合并并在必要时覆盖。

【讨论】：