Contact form 7 как сделать выбор диапазона дат?

Ссылка скопирована
GitHub HTML
1 ответ

Здравствуйте, может кто-то знает как сделать диапазон дат в контактной форме, то есть например выбор от 02.09.23 до 08.0923

Дополнительно:

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...
Либо вешай плагин. Например https://github.com/qodesmith/datepicker
На клиенте и на сервере проверяй правильность ввода.

Ответы:

Установите и активируйте плагин DatePicker
Добавьте поле для выбора даты, используя следующий код в вашей форме
[date* your-date min:start_date max:end_date]
Здесь your-date - это имя поля, которое вы можете выбрать самостоятельно, min - это начальная дата диапазона, а max - это конечная дата диапазона. Замените start_date и end_date на даты вашего выбора

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Мария Код Ответ

В Contact Form 7 диапазон дат лучше делать двумя полями: дата начала и дата окончания. HTML5-поле date умеет выбрать одну дату, но не полноценный диапазон. Для простого варианта можно поставить два поля и проверить, что дата окончания не раньше даты начала.

Форма:

[date* date_from class:js-date-from]
[date* date_to class:js-date-to]

[date* date_from class:js-date-from] [date* date_to class:js-date-to]

Клиентская проверка:

document.addEventListener('change', function () {
  const from = document.querySelector('.js-date-from');
  const to = document.querySelector('.js-date-to');
 
  if (from && to && from.value) {
    to.min = from.value;
  }
});

document.addEventListener('change', function () { const from = document.querySelector('.js-date-from'); const to = document.querySelector('.js-date-to'); if (from && to && from.value) { to.min = from.value; } });

Но одной клиентской проверки мало. Пользователь может отправить форму вручную, поэтому добавьте серверную валидацию CF7:

add_filter('wpcf7_validate_date*', function ($result, $tag) {
    $from = $_POST['date_from'] ?? '';
    $to = $_POST['date_to'] ?? '';
 
    if ($from && $to && strtotime($to) < strtotime($from)) {
        $result->invalidate($tag, 'Дата окончания не может быть раньше даты начала.');
    }
 
    return $result;
}, 20, 2);

add_filter('wpcf7_validate_date*', function ($result, $tag) { $from = $_POST['date_from'] ?? ''; $to = $_POST['date_to'] ?? ''; if ($from && $to && strtotime($to) < strtotime($from)) { $result->invalidate($tag, 'Дата окончания не может быть раньше даты начала.'); } return $result; }, 20, 2);

Если нужен красивый календарь именно с выделением диапазона, берите flatpickr с mode range. Тогда на фронте будет одно поле, но перед отправкой удобно разложить выбранный диапазон на две скрытые даты. Для заявок и бронирования это надёжнее, чем пытаться заставить стандартное HTML5 date-поле работать как range-picker.

В письме Contact Form 7 выводите обе даты отдельно: [date_from] и [date_to]. Если используете один range-picker, который возвращает строку вроде 02.09.2026 to 08.09.2026, её всё равно лучше разобрать перед отправкой и положить в два hidden-поля. Так проще проверять диапазон, считать количество дней и передавать данные в CRM.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Как правильно настроить vless для Android TV? 0 ответов Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 0 ответов