Question

我正在使用此日期范围选择器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

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

由于

Answer 1

未定义变量start，因为它在回调匿名函数中是scoped。为了能够访问它，你必须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。

从函数中获取jQuery变量

1 个答案:

编辑：