Flatpickr-init.js

Flatpickr-init.js

document.addEventListener("DOMContentLoaded", function() {
  var startDateInput = document.getElementById("start_date");
  var endDateInput = document.getElementById("end_date");
  var startDateDisplayInput = document.getElementById("start_date_display");
  var endDateDisplayInput = document.getElementById("end_date_display");

  function setDateInputs(startDate, endDate) {
      var startDateISO = startDate ? formatDateYMD(startDate) : '';
      var endDateISO = endDate ? formatDateYMD(endDate) : '';

      startDateInput.value = startDateISO;
      endDateInput.value = endDateISO;

      startDateDisplayInput.value = startDate ? formatDateDisplay(startDate) : '';
      endDateDisplayInput.value = endDate ? formatDateDisplay(endDate) : '';

      console.log("Start Date Display:", startDateDisplayInput.value);
      console.log("End Date Display:", endDateDisplayInput.value);

      var event = new Event('change');
      startDateInput.dispatchEvent(event);
      endDateInput.dispatchEvent(event);
  }

  function formatDateYMD(date) {
      var year = date.getFullYear();
      var month = ("0" + (date.getMonth() + 1)).slice(-2);
      var day = ("0" + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
  }

  function formatDateDisplay(date) {
      return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
  }

  function initializeFlatpickr() {
      flatpickr(startDateDisplayInput, {
          mode: "range",
          dateFormat: "Y-m-d",
          minDate: "today",
          showMonths: 2,
          onChange: function(selectedDates) {
              if (selectedDates.length > 0) {
                  var startDate = new Date(selectedDates[0]);
                  var endDate = selectedDates.length === 2 ? new Date(selectedDates[1]) : new Date(selectedDates[0]);
                  var startDay = startDate.getDay();
                  if (startDay === 5 || startDay === 6 || startDay === 0) {
                      var minEndDate = new Date(startDate);
                      minEndDate.setDate(minEndDate.getDate() + 1);
                      if (endDate < minEndDate) {
                          endDate = minEndDate;
                          console.log("Adjusted End Date for Weekend Booking:", endDate);
                      }
                  }
                  setDateInputs(startDate, endDate);
              }
          },
          onClose: function(selectedDates) {
              if (selectedDates.length > 0) {
                  var startDate = selectedDates[0];
                  var formattedStartDate = formatDateDisplay(new Date(startDate));
                  startDateDisplayInput.value = formattedStartDate;
                  console.log("Trimmed Start Date Display:", formattedStartDate);
              }
          }
      });

      flatpickr(endDateDisplayInput, {
          mode: "range",
          dateFormat: "Y-m-d",
          minDate: "today",
          showMonths: 2,
          onChange: function(selectedDates) {
              if (selectedDates.length > 0) {
                  var startDate = new Date(selectedDates[0]);
                  var endDate = selectedDates.length === 2 ? new Date(selectedDates[1]) : new Date(selectedDates[0]);
                  var startDay = startDate.getDay();
                  if (startDay === 5 || startDay === 6 || startDay === 0) {
                      var minEndDate = new Date(startDate);
                      minEndDate.setDate(minEndDate.getDate() + 1);
                      if (endDate < minEndDate) {
                          endDate = minEndDate;
                          console.log("Adjusted End Date for Weekend Booking:", endDate);
                      }
                  }
                  setDateInputs(startDate, endDate);
              }
          },
          onClose: function(selectedDates) {
              if (selectedDates.length > 0) {
                  var endDate = selectedDates.length === 2 ? selectedDates[1] : selectedDates[0];
                  var formattedEndDate = formatDateDisplay(new Date(endDate));
                  endDateDisplayInput.value = formattedEndDate;
                  console.log("Trimmed End Date Display:", formattedEndDate);
              }
          }
      });
  }

  initializeFlatpickr();
});


//Add Select Date Header to Calendar Popup.
document.addEventListener('DOMContentLoaded', () => {
  const startDateInput = document.getElementById('start_date_display');
  const endDateInput = document.getElementById('end_date_display');

  // Function to create and inject the selected date wrap
  function injectSelectedDateWrap(instance) {
      // Create the wrap element for the selected date information
      const selectADateWrap = document.createElement('div');
      selectADateWrap.className = 'select-a-date-wrap';

      // Create the header element for displaying the number of days
      const selectedDatesHeader = document.createElement('div');
      selectedDatesHeader.className = 'selected-dates-header';
      selectedDatesHeader.textContent = '';

      // Create the element for displaying the selected dates range
      const selectedDates = document.createElement('div');
      selectedDates.className = 'selected-dates';
      selectedDates.textContent = 'Start Date - End Date';

      // Append header and dates elements to the wrap
      selectADateWrap.appendChild(selectedDatesHeader);
      selectADateWrap.appendChild(selectedDates);

      // Function to format date as "Aug 1, 2024"
      function formatDate(date) {
          return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
      }

      // Function to update the wrap based on selected dates
      function updateSelectedDatesWrap(dates) {
          if (dates.length === 0) {
              selectedDatesHeader.textContent = 'Select a Date';
              selectedDates.textContent = 'Start Date - End Date';
          } else if (dates.length === 1) {
              selectedDatesHeader.textContent = 'Select End Date';
              selectedDates.textContent = `${formatDate(dates[0])} - End Date`;
          } else if (dates.length === 2) {
              const startDate = formatDate(dates[0]);
              const endDate = formatDate(dates[1]);
              const numberOfDays = Math.ceil((dates[1] - dates[0]) / (1000 * 60 * 60 * 24)) + 1;
              selectedDatesHeader.textContent = `${numberOfDays} day${numberOfDays > 1 ? 's' : ''}`;
              selectedDates.textContent = `${startDate} - ${endDate}`;
          }
      }

      // Inject the wrap when the calendar is opened
      function handleCalendarOpen() {
          const calendarContainer = instance.calendarContainer;
          const monthsContainer = calendarContainer.querySelector('.flatpickr-months');

          if (calendarContainer && monthsContainer && !calendarContainer.contains(selectADateWrap)) {
              calendarContainer.insertBefore(selectADateWrap, monthsContainer);
              console.log('Selected date wrap injected.');
          }
          updateSelectedDatesWrap(instance.selectedDates);
      }

      // Attach event listeners to the inputs to detect clicks
      [startDateInput, endDateInput].forEach(input => {
          input.addEventListener('click', () => {
              setTimeout(() => {
                  if (instance.calendarContainer.classList.contains('open')) {
                      console.log("Flatpickr calendar opened via input click.");
                      handleCalendarOpen();
                  }
              }, 0); // Ensure Flatpickr's own click handling is done first
          });
      });

      // Fallback: Check for open calendar manually at intervals
      const fallbackInterval = setInterval(() => {
          if (instance && instance.calendarContainer && instance.calendarContainer.classList.contains('open')) {
              console.log("Fallback: Flatpickr calendar detected as open.");
              handleCalendarOpen();
              clearInterval(fallbackInterval); // Stop checking once open is detected
          }
      }, 100);

      // Optional: Disconnect the observer when the calendar is closed
      instance.config.onClose.push(() => {
          clearInterval(fallbackInterval);
          console.log("Flatpickr calendar closed. Interval cleared.");
      });
  }

  // Wait until Flatpickr instances are ready, then inject the wrap
  setTimeout(() => {
      // Get the Flatpickr instances associated with the inputs
      const startDateInstance = startDateInput._flatpickr;
      const endDateInstance = endDateInput._flatpickr;

      console.log('startDateInstance:', startDateInstance);
      console.log('endDateInstance:', endDateInstance);

      if (startDateInstance) {
          injectSelectedDateWrap(startDateInstance);
      }

      if (endDateInstance) {
          injectSelectedDateWrap(endDateInstance);
      }
  }, 100);
});