1

我正在使用这个日期范围选择器https://github.com/dangrossman/bootstrap-daterangepicker

我在 scripts.js 中使用它进行初始化，然后在我的站点的页脚中调用 scripts.js

$(function(){
    if(jQuery().daterangepicker) {
        // Open Left
        $('.daterange.right').daterangepicker({
            opens: 'left'
        });

        // Open Right - default
        $('.daterange').daterangepicker();

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()],
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
        });
    }
});

在我的主页上，我放了

$(function(){
   alert(start);
});

我得到Uncaught ReferenceError: start is not defined

为什么开始没有定义？如何从函数（开始，结束）中获取该变量，以便在页面加载时使用该值？我知道我可以通过解析字段的 html 来获取日期，$('#rangedate').html();但是我该如何使用这些变量呢？

谢谢

4

1 回答 1

1

该变量start 未定义，因为它在该回调匿名函数内限定。为了能够访问它，您必须将其分配给return它或将其分配给其范围在您的其他函数内的变量（或分配给全局变量，尽管不建议这样做，因为它会污染全局范围）。

例如：

$(function(){
    var startDate; // Note this

    if(jQuery().daterangepicker) {
        // Open Left
        $('.daterange.right').daterangepicker({
            opens: 'left'
        });

        // Open Right - default
        $('.daterange').daterangepicker();

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()],
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
            startDate = start; // Assign to the variable in the higher scope
        });
    }

    alert(startDate); // Now our variable is available
});

编辑：

您希望拥有一个可以随时访问的全局变量，并且它会随着日期范围的变化而更新。

为了不过度污染全局作用域，我建议你创建一个新的对象来存储你的变量，比如calendar下面的例子：

var calendar = {}; // Global object: note that this is **outside**
                   // of your anonymous function below.
$(function(){

    if(jQuery().daterangepicker) {

        // Report range
        $('#reportrange').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment(), moment().add({ days: -6 })],
                'Last 30 Days': [moment().add({ days: -29 }), moment()]
            },
              startDate: moment().subtract('days', 29),
              endDate: moment()
        },
        function(start, end) {
            console.log(start.format('MMMM d, YYYY'));
            $('#reportrange #rangedate').html(start.format('MMMM d, YYYY') + ' - ' + end.format('MMMM d, YYYY'));
            calendar.startDate = start; // Assign `start` as a property
                                        // of your global variable
        });
    }

});

现在，您可以随时在任何函数中访问您的变量。尝试calendar.startDate在更改输入日期后打开控制台并输入。

于 2013-08-21T00:57:00.997 回答