Conditions for contact form 7 data select

Tried to do it via javascript. Nothing happened unfortunately.

indicated in the form:

[select city "Colorado" "Ohio"]
[date date-booking]
[hidden selected-city]

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var citySelect = document.querySelector('select[name="city"]');
  var dateInput = document.querySelector('input[name="date-booking"]');
  var selectedCityInput = document.querySelector('input[name="selected-city"]');

  citySelect.addEventListener('change', function() {
    var selectedCity = citySelect.value;
    selectedCityInput.value = selectedCity;

    if (selectedCity === 'Colorado') {
      dateInput.setAttribute('min', '');
      dateInput.setAttribute('max', '');
      dateInput.removeAttribute('readonly');
      dateInput.setAttribute('onclick', 'return showCalendar(this)');
    } else if (selectedCity === 'Ohio') {
      dateInput.setAttribute('min', '');
      dateInput.setAttribute('max', '');
      dateInput.removeAttribute('readonly');
      dateInput.setAttribute('onclick', 'return showCalendar(this)');
    } else {
      dateInput.removeAttribute('min');
      dateInput.removeAttribute('max');
      dateInput.setAttribute('readonly', 'readonly');
      dateInput.removeAttribute('onclick');
    }

    dateInput.value = '';
  });
});

function showCalendar(element) {
  var selectedCity = document.querySelector('select[name="city"]').value;
  var currentDate = new Date();
  var selectedDate = new Date(element.value);

  if (selectedCity === 'Colorado' && selectedDate.getDay() !== 4) {
    element.value = '';
    alert('Выберите дату отправления только по четвергам для города Colorado.');
  } else if (selectedCity === 'Ohio' && selectedDate.getDay() !== 3) {
    element.value = '';
    alert('Выберите дату отправления только по средам для города Ohio.');
  }

  return false;
}

I think you might find this useful: https://bdwm.be/how-to-create-dynamically-populated-cascading-dropdown-lists-for-contact-form-7/

<script>
document.addEventListener('DOMContentLoaded', function() {
  var citySelect = document.getElementById('mistovidpr');
  var dateField = document.querySelector('input[name="date-broni"');

  citySelect.addEventListener('change', function() {
    var selectedCity = citySelect.value;

    if (selectedCity === 'london') {
      // Активируем только среды в календаре
      dateField.setAttribute('min', getNextWednesday());
      dateField.setAttribute('max', getMaxDate());
      dateField.setAttribute('step', '7');
    } else if (selectedCity === 'usa' ) {
      // Активируем только понедельники в календаре
      dateField.setAttribute('min', getNextMonday());
      dateField.setAttribute('max', getMaxDate());
      dateField.setAttribute('step', '7');
    } else if (selectedCity === 'conada' ) {
      // Активируем только воскресенья в календаре
      dateField.setAttribute('min', getNextSunday());
      dateField.setAttribute('max', getMaxDate());
      dateField.setAttribute('step', '7');
    } else {
      // Сбрасываем ограничения, если выбран другой город
      dateField.removeAttribute('min');
      dateField.removeAttribute('max');
      dateField.removeAttribute('step');
    }
  });

  // Функция для получения следующей среды
  function getNextWednesday() {
    var today = new Date();
    var nextWednesday = new Date(today.getTime());
    nextWednesday.setDate(today.getDate() + ((3 - today.getDay() + 7) % 7) + 1);
    return nextWednesday.toISOString().split('T')[0];
  }

  // Функция для получения следующего понедельника
  function getNextMonday() {
    var today = new Date();
    var nextMonday = new Date(today.getTime());
    nextMonday.setDate(today.getDate() + ((1 - today.getDay() + 7) % 7) + 1);
    return nextMonday.toISOString().split('T')[0];
  }
  
  // Функция для получения следующего воскресенья
  function getNextSunday() {
    var today = new Date();
    var nextSunday = new Date(today.getTime());
    nextSunday.setDate(today.getDate() + ((6 - today.getDay() + 7) % 7) + 1);
    return nextSunday.toISOString().split('T')[0];
  }

  // Функция для получения максимальной даты (здесь можно задать нужное значение)
  function getMaxDate() {
    var maxDate = new Date();
    maxDate.setFullYear(maxDate.getFullYear() + 19); // Например, максимальная дата через год
    return maxDate.toISOString().split('T')[0];
  }
});
</script>

I solved the problem by making a javascript which works great. But there is a problem, it only works in the PC version, through an iPhone or Android device, javascript does not work. Where did I make a mistake?

I installed bare wordpress + contact form 7 , created a contact form with a date. [date date-516 step:7] on the computer, the date in the calendar is displayed as it should (Date is limited). and from the mobile version, both with android and ios, the calendar date is displayed all days without restrictions. Please help, there is clearly a problem here.

screen computer.

https://ibb.co/nfDYqz9

screen telephone:

https://ibb.co/mt3S0fR

Sorry, this is out of scope of what the conditional fields plugin has to offer. You should check some forums related to javascript, or hire a developer. I can recommend codeable.io