繁体   English   中英

如何为 daterangepicker 设置全局值?

[英]How to set global values for daterangepicker?

Github: Bootstrap Daterangepicker ,插件源: daterangepicker.js

我想为locale选项设置全局值。 我不想每次使用时都为每个元素设置它。

这是如何为特定元素设置 daterangepicker 的示例代码。

$('#demo').daterangepicker({
    "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
        "firstDay": 1
    },
    "startDate": "12/01/2016",
    "endDate": "12/07/2016"
}, function(start, end, label) {
  console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});

甚至有可能吗? 还是我必须重写插件?

如果没有一些自定义修改就不可能做到这一点,最好的方法是什么?

您可以将dateRangePickerSettings存储为全局变量

var dateRangePickerSettings = {
    locale: {...},
};

并将其引用到您的所有插件实例

$('#demo1').daterangepicker({
    "locale": dateRangePickerSettings.locale,
    "startDate": "06/01/2016",
    "endDate": "06/07/2016"
});

$('#demo2').daterangepicker({
    "locale": dateRangePickerSettings.locale,
    "startDate": "12/01/2016",
    "endDate": "12/07/2016"
});

Dan Grossman 在2.1.26 中添加了支持

Added support for $.fn.daterangepicker.defaultOptions to set default options for all pickers on page.

让我们试着在这里为新人解释一下。

$.fn.daterangepicker.defaultOptions = {
    locale: {
        "format": "DD/MM/YYYY",
        "separator": " - ",
        "applyLabel": "Aplicar",
        "cancelLabel": "Cancelar",
        "fromLabel": "Desde",
        "toLabel": "Hasta",
        "customRangeLabel": "Personalizado",
        "weekLabel": "W",
        "firstDay": 0,
        "daysOfWeek": ["Lu","Ma","Mi","Ju","Vi","Sa","Do"],
        "monthNames": [
            "Enero",
            "Febrero",
            "Marzo",
            "Abril",
            "Mayo",
            "Junio",
            "Julio",
            "Agosto",
            "Septiembre",
            "Octubre",
            "Noviembre",
            "Diciembre",
        ]
    }
}

$('#period').daterangepicker();

感谢@kurdemol94

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM