Get jQuery variable from function

Question

I'm using this daterange picker https://github.com/dangrossman/bootstrap-daterangepicker

I initialize with this in scripts.js then call scripts.js in the footer of my site

$(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'));
        });
    }
});

On my main page i've put

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

and I get Uncaught ReferenceError: start is not defined

Why is start not defined? How can I get that variable from the function(start,end) so I can use the value when the page loads? I know I can get the dates by parsing the html of the field with $('#rangedate').html(); but how can I use the variables instead?

Thanks

NinGen ShinRa · Accepted Answer · 2013-08-21 02:40:48Z

1

The variable start is not defined because it is scoped inside that callback anonymous function. In order to be able to access it, you have to return it or assign it to a variable whose scope is within your other function (or to a global variable, though this is not recommended as it pollutes the global scope).

For example:

$(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
});

Edit:

You want to have a global variable that you can access whenever you want, and that it is updated with the change of the date range.

In order not to pollute the global scope excessively, I suggest you create a new object to store your variables, such as calendar in the example below:

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
        });
    }

});

Now you can access your variable whenever you wish in whatever function. Try out opening the console and typing calendar.startDate after changing the date on the input.

edited Aug 21, 2013 at 2:40

answered Aug 21, 2013 at 0:57

NinGen ShinRa

6515 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anagio Over a year ago

Thanks but the alert opens with undefined, take a look at this jsfiddle please jsfiddle.net/peter/w3u7h

NinGen ShinRa Over a year ago

Of course it alerts undefined in that case. You can see the documentation where it states: The constructor also takes an optional options object and callback function. The function will be called whenever the selected date range has been changed by the user, and is passed the start and end dates (moment date objects) as parameters.

NinGen ShinRa Over a year ago

The function has not yet been called because the page just loaded. If you told your use case perhaps I could help you further.

Anagio Over a year ago

When my page loads for the first time before the user has changed the dates I need to access those variables

NinGen ShinRa Over a year ago

I edited my answer adding a better example; to summarize: 1. define global variable 2. assign variable to global inside your callback 3. profit

Collectives™ on Stack Overflow

Get jQuery variable from function

1 Answer 1

Edit:

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Edit:

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related