Question

I have the following code

$(".datePicker").datepicker({
    dateFormat: 'dd/mm/yy',
    autoSize: true,
    changeYear: true,
    changeMonth: true,
    yearRange: getYearRange()
});

The getYearRange function is only called once although there are many .datePickers.
To be clear, the getYearRange function will be called with the $(this) parameter.

Answer 1

Try specifying the function name without the “()”. When you do that, you’ll be setting that configuration property to a reference to the function. When you code it with “()”, you’re telling JavaScript to call the function while it’s putting together that object so that it can use the return value.

Now, that assumes that the date picker code expects a function there. If what you want to do is initialize each of your date picker widgets with some special computed year range, based on characteristics of the DOM element(s) involved, then you’d do something different:

$('.datepicker').each(function() {
  var $dp = $(this);
  $dp.datepicker({
    dateFormat: 'dd/mm/yy',
    autoSize: true,
    changeYear: true,
    changeMonth: true,
    yearRange: getYearRange.call(this)
  });
});

That would make sure that each date picker has a chance to figure out its own year range individually.

edit — reviewing the jQuery UI datepicker documentation, I don’t think it’ll invoke your “getYearRange” function if you pass it that way (as a function reference). Thus, if you want the function to run once for each date picker on the page, then you’d use the “.each()” loop above.