How to pass dateRange-array to jquery function

Question

I´m trying to disable specific date ranges with the isInvalidDate function of dateRangePicker to block already occupied dates in the date picker.

I have an array dateRanges outside of the dateRangePicker filled with multiple dateRange values:

dateRanges = [
{start': moment('2020-02-10), 'end': moment('2020-02-15')},
{start': moment('2020-02-20), 'end': moment('2020-02-25')},
{start': moment('2020-02-27), 'end': moment('2020-02-28')},
];

And I am trying to pass dateRanges array to dateRangePicker as an argument:

$(function(dateRanges) {
   $('input[name="datefilter"]').daterangepicker({
    alwaysShowCalenders: true,
    autoUpdateInput: false,
    locale: {
     firstDay: 1,
     format: "DD.MM.YYYY",
     separator: " bis ",
     applyLabel: "Bestätigen",
     cancelLabel: "Abbrechen",
     fromLabel: "Von",
     toLabel: "Bis",
     customRangeLabel: "Custom",
     weekLabel: "W",
     daysOfWeek: [
      "So",
      "Mo",
      "Di",
      "Mi",
      "Do",
      "Fr",
      "Sa"
     ],
     monthNames: [
      "Januar",
      "Februar",
      "März",
      "April",
      "Mai",
      "Juni",
      "Juli",
      "August",
      "September",
      "Oktober",
      "November",
      "Dezember"
     ],
    },
    "isInvalidDate": function(date, dateRanges) {
      return dateRanges.reduce(function(bool, range) {
       return bool || (date >= range.start && date <= range.end);
      }, false);
     },
     minDate: moment(),
 });

But I´ll keep getting the following error inside the chrome console:

sun_odyssey_349.php:225 Uncaught TypeError: Cannot read property 'reduce' of undefined
    at a.isInvalidDate (sun_odyssey_349.php:225)
    at a.renderCalendar (daterangepicker.min.js:7)
    at a.updateCalendars (daterangepicker.min.js:7)
    at a.updateView (daterangepicker.min.js:7)
    at a.show (daterangepicker.min.js:7)
    at HTMLInputElement.e (jquery.min.js:2)
    at HTMLInputElement.dispatch (jquery.min.js:3)
    at HTMLInputElement.q.handle (jquery.min.js:3)
isInvalidDate   @   sun_odyssey_349.php:225
renderCalendar  @   daterangepicker.min.js:7
updateCalendars @   daterangepicker.min.js:7
updateView      @   daterangepicker.min.js:7
show            @   daterangepicker.min.js:7
e               @   jquery.min.js:2
dispatch        @   jquery.min.js:3
q.handle        @   jquery.min.js:3

Can you help me, please?

Answer 1

Try this

$(function() {

    var dateRanges = [{
            "start": moment("2020-02-10"),
            "end": moment("2020-02-15")
        },
        {
            "start": moment("2020-02-20"),
            "end": moment("2020-02-25")
        },
        {
            "start": moment("2020-02-27"),
            "end": moment("2020-02-28")
        },
    ];
    $('input[name="datefilter"]').daterangepicker({
        alwaysShowCalenders: true,
        autoUpdateInput: false,
        locale: {
            firstDay: 1,
            format: "DD.MM.YYYY",
            separator: " bis ",
            applyLabel: "Bestätigen",
            cancelLabel: "Abbrechen",
            fromLabel: "Von",
            toLabel: "Bis",
            customRangeLabel: "Custom",
            weekLabel: "W",
            daysOfWeek: [
                "So",
                "Mo",
                "Di",
                "Mi",
                "Do",
                "Fr",
                "Sa"
            ],
            monthNames: [
                "Januar",
                "Februar",
                "März",
                "April",
                "Mai",
                "Juni",
                "Juli",
                "August",
                "September",
                "Oktober",
                "November",
                "Dezember"
            ],
        },
        "isInvalidDate": function(date) {
            return dateRanges.reduce(function(bool, range) {
                return bool || (date >= range.start && date <= range.end);
            }, false);
        },
        minDate: moment(),
    });
});