Question 11049 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

convert array to javascript object – Jquery

I get an array that looks like this:

var dateUnvailableCalendar = {{ datesUnvailable|json_encode|raw }};

array

and I want to transform it to look like this:

{
    'from': '2023-03-06 00:00',
    'to': '2023-03-13 00:00'
},
{
    'from': '2023-03-01 00:00',
    'to': '2023-03-01 00:00'
}

do you know how i could do this please?

Thank you for help.

WORK

calendar.flatpickr({
  disable: [
    function (date) {
      return date.getDay()===dayWeek[0]||
        date.getDay()===dayWeek[1]||
        date.getDay()===dayWeek[2]||
        date.getDay()===dayWeek[3]||
        date.getDay()===dayWeek[4]||
        date.getDay()===dayWeek[5]||
        date.getDay()===dayWeek[6]
    },
    {
      'from': '2023-03-06 00:00',
      'to': '2023-03-13 00:00'
    },
    {
      'from': '2023-03-01 00:00',
      'to': '2023-03-01 00:00'
    }
  ],
  minDate: "today",
  onChange: function (selectedDates, dateStr) {
    calendarHandleChange(dateStr);
  }
});

in this example the dates that will be deactivated will be those that are in the function.


calendar.flatpickr({
                        disable: [
                            function(date) {
                                return date.getDay() === dayWeek[0] ||
                                    date.getDay() === dayWeek[1] ||
                                    date.getDay() === dayWeek[2] ||
                                    date.getDay() === dayWeek[3] ||
                                    date.getDay() === dayWeek[4] ||
                                    date.getDay() === dayWeek[5] ||
                                    date.getDay() === dayWeek[6]
                            },
                            [
                                {"from":"2023-03-06 00:00","to":"2023-03-13 00:00"},
                                {"from":"2023-03-01 00:00","to":"2023-03-01 00:00"}
                            ]
                        ],
                        minDate: "today",
                        onChange: function (selectedDates, dateStr) {
                            calendarHandleChange(dateStr);
                        }
                    });

do you know why it doesn’t work sending the array to it?

Tags:

2

Answers


  1. 0

    Take a look at what you’re doing here:

    disable: [
  function(date) { /*...*/ },
  dateUnvailableCalendar
]

    What is dateUnvailableCalendar? Is it an array? If so then the resulting structure is this:

    disable: [
  function(date) { /*...*/ },
  []
]

    That is, this disable property is an array with two elements, one of which is a function and the other of which is another array.

    It sounds like you want to append the contents of this dateUnvailableCalendar array to create one larger array. You can use the spread operator, for example:

    disable: [
  function(date) { /*...*/ },
  ...dateUnvailableCalendar
]

    Edit: The functionality is demonstrated here:

    let calendar = document.getElementById('calendar');
let dayWeek = [1,1,1,1,1,1,1];

let calendarHandleChange = (dateStr) => {
  console.log(dateStr);
}
let dateUnvailableCalendar = [{
    'from': '2023-03-06 00:00',
    'to': '2023-03-13 00:00'
},
{
    'from': '2023-03-01 00:00',
    'to': '2023-03-01 00:00'
}];

calendar.flatpickr({
  disable: [
    function(date) {
      return date.getDay() === dayWeek[0] ||
        date.getDay() === dayWeek[1] ||
        date.getDay() === dayWeek[2] ||
        date.getDay() === dayWeek[3] ||
        date.getDay() === dayWeek[4] ||
        date.getDay() === dayWeek[5] ||
        date.getDay() === dayWeek[6]
    },
    ...dateUnvailableCalendar // <--- spreading the array here
  ],
  minDate: "today",
  onChange: function (selectedDates, dateStr) {
    calendarHandleChange(dateStr);
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input id="calendar" />

    (Credit to this answer for providing the minimal reproducible example that the OP refuses to.)

    Login or Signup to reply.
  2. 0

    Works on more than 2 elements of dateUnvailableCalendar

    Your problem will be solved if you try to use the index of dateUnvailableCalendar in flatpickr disable property (e.g. dateUnvailableCalendar[0]). Try this:

    let calendar = document.getElementById('calendar');
let dayWeek = [1,1,1,1,1,1,1];

let calendarHandleChange = (dateStr) => {
  console.log(dateStr);
}
let dateUnvailableCalendar = [{
    'from': '2023-03-06 00:00',
    'to': '2023-03-13 00:00'
},
{
    'from': '2023-03-01 00:00',
    'to': '2023-03-01 00:00'
},
{
    'from': '2023-03-22 00:00',
    'to': '2023-03-23 00:00'
}];

calendar.flatpickr({
  disable: [
    function (date) {
      return date.getDay()===dayWeek[0]||
        date.getDay()===dayWeek[1]||
        date.getDay()===dayWeek[2]||
        date.getDay()===dayWeek[3]||
        date.getDay()===dayWeek[4]||
        date.getDay()===dayWeek[5]||
        date.getDay()===dayWeek[6]
    }
  ].concat(dateUnvailableCalendar),
  minDate: "today",
  onChange: function (selectedDates, dateStr) {
    calendarHandleChange(dateStr);
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<input id="calendar" />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search