В действии редактирования поле flatpickr очищается, поскольку его предыдущее значение по-прежнему относится к отключенным датам. Как это решить? - PullRequest
Новая
       10

В действии редактирования поле flatpickr очищается, поскольку его предыдущее значение по-прежнему относится к отключенным датам. Как это решить?

0 голосов
/ 01 ноября 2019

В форме у меня есть 2 поля, start_date и end_date. Следовательно, я хотел бы исключить диапазоны дат между start_date & end_date, если они были выбраны ранее. У меня есть код, работающий для «новых действий».

Проблема является «действием редактирования», так как она по-прежнему принимает предыдущие выбранные даты для соответствующего объекта редактирования в качестве отключенных дат (например, в новом создан диапазон 1.1.2019-1.2.2019, затем в редактированииэти даты исключены, даже если это изменило бы соответствующую запись и, следовательно, должно быть разрешено).

Я искал несколько дней, но, похоже, не могу найти / найти правильное решение ...

форма 

<div hidden class= "widget-content" data-unavailable="<%= @room_type.unavailable_dates.to_json %>"></div>

модель типа комнаты 

def unavailable_dates
    @days = ((Date.today-10)...(Date.today+365)).to_a.map{|x| x.to_s(:db)}
    unavailable = []
    @days.each do |day|
      #self.room_prices.where.not(RoomPrice.find(:id).each do |room_price|
      self.room_prices.each do |room_price|
        if (room_price.start_date..room_price.end_date) === Date.parse(day)
          unavailable << Date.parse(day)
        end
      end
    end
    unavailable
  end

date_picker-Prices.js 

import flatpickr from 'flatpickr';

const toggleDateInputs1 = function() {
  const startDateInput = document.getElementById('start_date1');
  const endDateInput = document.getElementById('end_date1');

  if (startDateInput && endDateInput) {
    const unavailableDates = JSON.parse(document.querySelector('.widget-content').dataset.unavailable)

    flatpickr(startDateInput, {
    disable: unavailableDates,
    format: "d-m-Y",
    altFormat: "d-m-Y",
    altInput: true,
    onChange: function(selectedDates, selectedDate) {
      if (selectedDate === '') {
        endDateInput.disabled = true;
      }
      let minDate = selectedDates[0];
      minDate.setDate(minDate.getDate() + 1);
      endDateCalendar.set('minDate', minDate);
      endDateInput.disabled = false;
    }
  });

    const endDateCalendar =
      flatpickr(endDateInput, {
        disable: unavailableDates,
        format: "d-m-Y",
        altFormat: "d-m-Y",
        altInput: true,
        },
      );
  }
};

export { toggleDateInputs1 }
...