Как передать массив dateRange в функцию jquery - PullRequest
Новая
       17

Как передать массив dateRange в функцию jquery

0 голосов
/ 01 февраля 2020

Я пытаюсь отключить определенные c диапазоны дат с помощью функции isInvalidDate dateRangePicker , чтобы заблокировать уже занятые даты в средстве выбора даты.

У меня есть массив dateRanges за пределами dateRangePicker, заполненного несколькими dateRange значениями: 

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')},
];

И я пытаюсь передать массив dateRanges в dateRangePicker в качестве аргумента: 

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

Но в консоли chrome будет отображаться следующая ошибка: 

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

Не могли бы вы мне помочь, пожалуйста?

1 Ответ

0 голосов
/ 01 февраля 2020

Попробуйте это 

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