Поддержка Плагины Conditional Fields for Contact Form 7

  • Добрый день.

    Как с помощью данного плагина при выборе города, выбор даты был по определённым числам. К примеру из списка выбираем город1, для него доступны дни недели только по средам, а для города2 только по четвергам? я пробовал и через Javascript сделать, ничего не вышло. Заранее спасибо.

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Создайте 2 разных поля (группы), выводите по условию. Conditional Fields именно для этого.
    Чтобы ограничить дни недели используйте атрибут step:7
    https://contactform7.com/date-field/

    то-есть если у меня 20 городов, то каждому городу отдельно делать или можно каждому городу дать id и дату по id выводить нужный календарь? правильно я понял?

    Важно не сколько городов, а сколько правил для календаря. Если их всего 2, то не надо создавать отдельную группу для каждого города.
    Можно и скриптом подгружать календарь, без плагина Conditional Fields

    Я пытался сделать таким образом.

    [select city "Город1" "Город2"]
    [date date-booking]
    [hidden selected-city]
    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 === 'Город1') {
          dateInput.setAttribute('min', '');
          dateInput.setAttribute('max', '');
          dateInput.removeAttribute('readonly');
          dateInput.setAttribute('onclick', 'return showCalendar(this)');
        } else if (selectedCity === 'Город2') {
          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 === 'Город1' && selectedDate.getDay() !== 4) {
        element.value = '';
        alert('Выберите дату отправления только по четвергам для города Город1.');
      } else if (selectedCity === 'Город2' && selectedDate.getDay() !== 3) {
        element.value = '';
        alert('Выберите дату отправления только по средам для города Город2.');
      }
    
      return false;
    }

    привязку javascritpt сделал через functions.php

    ничего не получилось

    • Ответ изменён 11 месяцев, 1 неделя назад пользователем rlbeors.
    Автор rlbeors

    (@rlbeors)

    вообщем сделал я, всё отлично! но есть одно но, почему с ПК даты отображаются с ограничением (то-есть доступны к примеру только по средам) а с мобильного телефона все даты доступны?

    я грешил может конфликт между плагинами, установил голую wp и cf7 создал 1 поле с датой [date date-516 step:7] с пк все ок , а с мобильного нет.

Просмотр 5 ответов — с 1 по 5 (всего 5)
  • Тема «Conditional Fields for Contact Form 7» закрыта для новых ответов.