Real-Time Date & Time Lock for Elementor Forms

<script>
document.addEventListener('DOMContentLoaded', function() {
  var dateInput = document.getElementById('form-field-ConsultationDate');
  var timeInput = document.getElementById('form-field-ConsultationTime'); // Make sure this matches your actual Time field ID

  if (!dateInput || !timeInput) return;

  // 1. Enforce date restriction instantly on load
  function getFormattedToday() {
    var today = new Date();
    var dd = String(today.getDate()).padStart(2, '0');
    var mm = String(today.getMonth() + 1).padStart(2, '0');
    var yyyy = today.getFullYear();
    return yyyy + '-' + mm + '-' + dd;
  }
  dateInput.setAttribute('min', getFormattedToday());

  // 2. Real-time time limitation function
  function evaluateTimeRestriction() {
    var todayStr = getFormattedToday();
    
    // IF user selects today's date, recalculate the exact time RIGHT NOW
    if (dateInput.value === todayStr) {
      var freshNow = new Date();
      var hh = String(freshNow.getHours()).padStart(2, '0');
      var min = String(freshNow.getMinutes()).padStart(2, '0');
      var formattedTimeNow = hh + ':' + min; // e.g., "12:07"
      
      timeInput.setAttribute('min', formattedTimeNow);
      
      // If the user previously selected an invalid time, reset it to the new minimum
      if (timeInput.value && timeInput.value < formattedTimeNow) {
        timeInput.value = formattedTimeNow;
      }
    } else {
      // Future date chosen: clear all minimum time parameters
      timeInput.removeAttribute('min');
    }
  }

  // 3. Trigger whenever the user actively clicks, focuses, or changes the field
  timeInput.addEventListener('focus', evaluateTimeRestriction);
  timeInput.addEventListener('click', evaluateTimeRestriction);
  timeInput.addEventListener('change', evaluateTimeRestriction);
  dateInput.addEventListener('change', evaluateTimeRestriction);

  // 4. Client-side protection right at submission to block bypassing
  var parentForm = timeInput.closest('form');
  if (parentForm) {
    parentForm.addEventListener('submit', function(e) {
      evaluateTimeRestriction(); // Fetch last-second time values
      var freshNow = new Date();
      var hh = String(freshNow.getHours()).padStart(2, '0');
      var min = String(freshNow.getMinutes()).padStart(2, '0');
      var formattedTimeNow = hh + ':' + min;

      if (dateInput.value === getFormattedToday() && timeInput.value < formattedTimeNow) {
        e.preventDefault(); // Stop submission completely
        alert('Please select a valid future time. The time you chose has already passed.');
      }
    });
  }
});
</script>