Дата Время

The Дата Время поле дает пользовательскому виджету правильный выбор календаря вместо свободного текстового поля даты Редакторы щелкают поле в Elementor, открывается календарь Flatpickr, и они выбирают дату (и, возможно, время), никогда не беспокоясь о вводе формата, который ожидает ваш виджет. Внутри главных аддонов Виджет СтроительВ этой последовательности и заключается вся суть: значение всегда приходит в предсказуемом формате, на который могут положиться ваш шаблон и сценарий.

Поле "Дата Время" поддерживает Условия как и любой элемент управления, и его значение печатается через Механизм шаблонов Twig-синтаксисаитак, вы можете сравнить это или завернуть {% if %} блоки в вашем шаблоне. Оба руководства охватывают настройку и ограничения.

Поле соединяется через токен, как и каждое простое поле значения. Печать {{ event_date }} на панели HTML отобразить дату или передать ее на панель JS, где ее можно проанализировать обратным отсчетом, проверкой часов работы или сценарием планирования.

Что делает поле Дата Время #

• Отображает выбор календаря с кликом на открытие (Flatpickr) на панели Elementor виджета.
• Опционально включает в себя переключатель времени рядом с календарем.
• Хранит медиатор в виде форматированной строки, нормализованной по Y-m-d H:i с включенным временем или Y-m-d без него.
• Печатает эту строку в любом месте панели HTML, CSS или JS {{ your_field_name }}.
• Прямо подает JavaScript, обычный маршрут обратного отсчета и планирования виджетов.

Если пользовательские виджеты являются новой территорией, Обзор виджета-строителя это лучшая отправная точка; эта страница предполагает, что вы знаете, как обращаться с редактором.

Прежде чем начать #

• WordPress с Элементор установлен и активен.
• Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
• Пользовательский виджет, открытый в редакторе Widget Builder Наш пример - виджет обратного отсчета событий с полем Дата Время с именем event_date что сценарий виджета ведет обратный отсчет.

Как добавить поле Дата Время #

Перетащите Дата Время поле с панели полей в раздел под Содержание вкладка. Его параметры открываются слева после приземления.

Дата Объяснены параметры поля времени #

• Этикетка: текст, показанный рядом с подборщиком в Elementor, например “Event Date”.
• Имя: уникальный идентификатор, на который ссылаются ваши шаблоны Буквы, цифры и подчеркивания только, например event_date.
• По умолчанию: начальная дата строка, с которой поставляется виджет.
• Включить время: добавляет в календарь переключатель часов и минут. с его включением значения выходят как Y-m-d H:i (нравится 2026-12-31 18:00); с этим, как просто Y-m-d дата.
• Минутное увеличение: шаг, на котором движется переключатель минут, поэтому редакторы могут быть ограничены 5, 15 или 30-минутными интервалами.
• Описание, Показать метку, Разделитель: стандартные параметры отображения, плюс Условия показа поля только тогда, когда другой элемент управления имеет определенное значение.

Под капотом сборщик принимает a picker_options объект с дополнительными настройками Flatpickr, в том числе noCalendar для сборщика только времени, dateFormat, time_24hrи minDate/maxDate границы. пользовательский интерфейс конструктора сохраняет общие значения "Включить увеличение времени и минуты" спереди и в центре, а время выполнения нормализует сохраненные значения в двух форматах, указанных выше, в любом случае.

Подключите поле "Дата-время" своим токеном #

Поле Дата Время - это поле токена Отображение даты - это один токен на панели HTML:

<p class="event-when">Doors open {{ event_date }}</p>

Более распространенной проводкой является панель JS. Потому что значение стабильное Y-m-d H:i строка, JavaScript может анализировать его и управлять обратным отсчетом:

// JS panel
var deadline = new Date("{{ event_date }}".replace(" ", "T"));

var timer = setInterval(function () {
  var diff = deadline - new Date();
  if (diff <= 0) { clearInterval(timer); return; }
  var days  = Math.floor(diff / 86400000);
  var hours = Math.floor((diff % 86400000) / 3600000);
  document.querySelector(".event-countdown").textContent =
    days + "d " + hours + "h";
}, 1000);

Перед международным запуском стоит знать одну вещь: к анализируемой дате не прилагается часовой пояс, так что new Date() интерпретирует его в местном времени каждого посетителя Обратный отсчет до “18:00” заканчивается в 18:00 в Берлине и снова в 18:00 в Нью-Йорке Для единого глобального срока добавьте явный смещение типа +00:00 в строку перед анализом.

Осторожно: токен печатает простую строку, поэтому цитируйте ее в JavaScript. var deadline = "{{ event_date }}"; работает; без кавычек отображаемое значение является синтаксической ошибкой. и поскольку формат исправлен настройкой Включить время, заранее решите, ожидает ли ваш сценарий 2026-12-31 или 2026-12-31 18:00, тогда держите переключатель в соответствии с ним.

Используйте элемент управления "Дата времени" в Elementor #

Добавьте свой пользовательский виджет на страницу в Elementor или перезагрузите редактор, если страница уже была открыта. Поле отображается как ввод в текстовом стиле под вашей меткой; щелчок по нему открывает всплывающее окно календаря.

Выберите день, и с включенным Включить время, установить час и минуты ниже календаря. ввод заполняет с форматированным значением и обновлениями предварительного просмотра. редакторы никогда не печатают дату вручную, поэтому формат, который анализирует ваш сценарий, всегда является форматом, который приходит.

Обычные случаи использования #

• Виджеты обратного отсчета для запусков, продаж и мероприятий, при этом панель JS рассчитывает.
• Карточки событий напечатайте отформатированную дату рядом с местом проведения и названием.
• Баннеры ограниченного предложения что сценарий скрывается, как только истечет срок.
• Бронирование и отображение расписания время открытия или закрытия дает наценку.
• “Опубликовано на” стиле метаданные для виджетов пользовательского контента.

Советы по работе с полем Дата Время #

• Соответствуйте "Включить время" работе. Обратный отсчет требует временной составляющей; “, опубликованный на линии”, не. Сохраненный формат следует за переключателем.
• Цитируйте токен в JS. Значение представляет собой строку, а даты без кавычек нарушают сценарий в момент его рендеринга.
• Нормализовать перед разбором. Замена пространства на T, как в примере обратного отсчета, держит new Date() синтаксический анализ согласован в браузерах.
• Установите по умолчанию в будущем для виджетов обратного отсчета, поэтому свежее падение отсчитывает время вместо отображения нулей.
• Используйте минутное увеличение для снижения шума. Пятнадцатиминутные шаги легче выбрать и прочитать, чем произвольные минуты.
• Обратитесь с прошлым. Решите в сценарии, что произойдет, когда срок пройдет: скрыть виджет, показать сообщение или остановиться на нуле.

Часто задаваемые вопросы #

Завершая #

Поле Widget Builder Date Time берет запись даты из рук редакторов и вкладывает в ваши предсказуемую строку: один выборщик на панели, один токен в шаблоне и форматы, которые сценарии могут анализировать без защитного кода. Соедините его с Поле коммутатора чтобы переключить поведение с истекшим состоянием или Числовое поле для настраиваемых интервалов обновления. Исследуйте остальную часть Виджеты и расширения Master Addgetsи посмотрите страница ценообразования за то, что включает каждый план.