2017-02-11 221 views
0

我有使用Bootstrap Datetimepicker設置的多個日曆輸入:http://eonasdan.github.io/bootstrap-datetimepicker/如何設置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' 
}); 

所以我不得不重複這個默認設置。有沒有辦法讓所有的插件實例默認?

+0

這樣的流派多少? – webmaster

+0

@webmaster,有獨特的設置。 – sdvnksv

回答

0

您可以設置它像一個功能:

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

您可以使用列出了更多的價值,我希望這有助於

0

這是@webmasteranswer更加小巧方便的版本,利用了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 
})); 

您可以再次提供一個設置對象,這些對象將會合並,並在必要時覆蓋默認設置。