Customizing Date Selection in Elementor Forms

				
					jQuery(document).ready(function($) {
  // Function to modify Flatpickr configurations
  function modifyDatePicker() {
    const dateInput = document.getElementById('form-field-field_6230bde');
    if (dateInput && dateInput._flatpickr) {
      // Calculate minimum date (today + 1 day)
      const today = new Date();
      const minDate = new Date(today);
      minDate.setDate(today.getDate() + 1);
      
      // Calculate maximum date (today + 180 days)
      const maxDate = new Date(today);
      maxDate.setDate(today.getDate() + 180);
      
      // Set up English localization (default)
      if (typeof window.flatpickr !== 'undefined') {
        // Note: English is the default language in Flatpickr
        // We're keeping this section for reference if you want to change languages later
        
        // Destroy the current instance
        dateInput._flatpickr.destroy();
        
        // Recreate with the correct settings
        flatpickr(dateInput, {
          dateFormat: "m/d/Y", // Standard US format: month/day/year
          minDate: minDate,
          maxDate: maxDate,
          disableMobile: "true",
          // Using default English locale
          altInput: true,
          altFormat: "m/d/Y", // Alternative format visible to the user
          onChange: function(selectedDates, dateStr, instance) {
            console.log("Selected date:", dateStr);
          }
        });
      } else {
        console.error("Flatpickr is not available in the window object");
      }
      
      console.log('Datepicker successfully modified:');
      console.log('- Minimum date: ' + minDate.toDateString());
      console.log('- Maximum date: ' + maxDate.toDateString());
      console.log('- Default English localization applied');
      console.log('- Date format: MM/DD/YYYY');
    }
  }

  // Function to use MutationObserver to detect when the datepicker is initialized
  function setupObserver() {
    const dateInput = document.getElementById('form-field-field_6230bde');
    if (!dateInput) {
      // If the element doesn't exist yet, try again soon
      setTimeout(setupObserver, 500);
      return;
    }
    
    // Check if the datepicker is already initialized
    if (dateInput._flatpickr) {
      modifyDatePicker();
      return;
    }
    
    // Configure an observer to monitor changes to the element
    const observer = new MutationObserver(function(mutations) {
      for (let mutation of mutations) {
        if (dateInput._flatpickr) {
          modifyDatePicker();
          observer.disconnect(); // Stop observing once the datepicker has been modified
          break;
        }
      }
    });
    
    // Observe the element's attributes and its children
    observer.observe(dateInput, {
      attributes: true,
      childList: true,
      subtree: true,
      attributeFilter: ['class']
    });
    
    // As a fallback, also try using setTimeout with increasing intervals
    const checkIntervals = [500, 1000, 2000, 3000, 5000];
    checkIntervals.forEach(interval => {
      setTimeout(function() {
        if (dateInput._flatpickr) {
          modifyDatePicker();
          observer.disconnect();
        }
      }, interval);
    });
  }
  
  // Start the process at the DOMContentLoaded event
  document.addEventListener('DOMContentLoaded', function() {
    setupObserver();
  });
  
  // Also start at the load event for safety
  window.addEventListener('load', function() {
    setupObserver();
  });
  
  // Backup: also try at the elementor/frontend/init event
  $(window).on('elementor/frontend/init', function() {
    elementorFrontend.hooks.addAction('frontend/element_ready/form.default', function() {
      setTimeout(setupObserver, 100);
    });
  });
});