Дата Время

Поле "Время даты" добавляет средство выбора календаря в собственный виджет, который вы создаете с помощью главных аддонов Виджет Строитель. Редакторы щелкают по полю в Elementor, выбирают день и, если вы позволяете, время. Виджет получает выбор в виде простого текстового значения, такого как 2026-10-24 19:30, который вы можете распечатать в HTML или передать в сценарий обратного отсчета.

Дата Время является Полем Pro. бесплатный плагин включает ограниченный Виджет Строитель, и полный набор полей приходит с Мастер Аддоны Про.

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

• Добавляет ввод даты на панель виджета в Elementor.Нажав на него, открывается календарь.
• С Включить время на, календарь получает час и минуту ряд под. Часы всегда 24-часовой.
• Сохраняет выбранное значение в виде текста: Y-m-d H:i (например 2026-10-24 19:30) со временем или Y-m-d (2026-10-24) без него.
• Печатает эту ценность, где бы вы ни разместили ее токен, например {{ event_date }}, на панели HTML, CSS или JS.

Новое для строителя? Прочитать Обзор виджета-строителя сначала вернитесь с открытым виджетом.

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

• WordPress с установленным и активным элементом Elementor.
• Мастер-аддоны для Elementor и Master Addons Pro, оба активные. The руководство установки настройка обложек.
• Виджет, открытый в Widget Builder Пример в этом руководстве - виджет “Event Countdown”: текстовое поле с именем event_titleИмя поля "Дата-время" event_dateи короткий сценарий, который отсчитывает до этой даты.

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

1. Перейти к Мастер-аддоны > Виджет-строитель и откройте виджет.
2. На Содержание вкладка, добавить раздел, если его ещё нет, например “Event”.
3. Тип date в поле поиска слева.
4. Драг Дата Время в раздел Нажмите на карандаш на поле, чтобы открыть его настройки.

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

• Этикетка: текст рядом с входом в Elementor, например “Event Date”.
• Имя: уникальный идентификатор поля и название его токена Используйте только буквы, цифры и подчеркивания, например event_date.
• Описание: подсказка, показанная под входом в Elementor, например “Выберите дату и время окончания обратного отсчета.”
• Включить время: добавляет в календарь часовую и минутную строку и переключает сохраненный формат с Y-m-d чтобы Y-m-d H:i.
• Минутное увеличение: насколько далеко движутся минуты при каждом нажатии стрелок По умолчанию 1. При 15 стрелки шаг через:00, :15, :30 и:45.
• Значение по умолчанию: дата начала новой копии виджета.

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

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

Общие настройки #

• Показать метку скрывает или показывает этикетку на панели.
• Блок этикеток ставит метку на собственную строку над входом Включите ее, если ваша метка длинная.
• Условия показывает поле только тогда, когда другой элемент управления имеет определенное значение, например переключатель “Показать обратный отсчет” См Условия.
• Сепаратор рисует разделительную линию до или после управления.

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

У сборщика нет вариантов для часов только по времени или для блокировки прошлых дат. Редакторы могут выбрать любой день.

Используйте дату в шаблоне #

Распечатайте токен везде, где должна появиться дата. в виджете Event Countdown HTML помещает дату в строку текста и в a data-deadline атрибут, который читается в сценарии:

<div class="event-card">
  <p class="event-title">{{ event_title }}</p>
  {% if event_date %}
  <p class="event-when">Starts {{ event_date }}</p>
  <div class="event-countdown" data-deadline="{{ event_date }}">
    <span class="days">0</span>d <span class="hours">0</span>h <span class="mins">0</span>m
  </div>
  {% endif %}
</div>

The {% if event_date %} проверка имеет значение. если редактор очищает входные данные, токен ничего не печатает. значение по умолчанию не используется снова, и без проверки будет отображаться обратный отсчет NaN.

Создайте обратный отсчет на панели JS #

Панель JS запускает этот скрипт. он находит каждый обратный отсчет, превращает сохраненный текст в дату и обновляет числа каждые 30 секунд:

document.querySelectorAll(".event-countdown").forEach(function (el) {
  var deadline = new Date(el.dataset.deadline.replace(" ", "T"));
  if (isNaN(deadline)) return;
  function tick() {
    var diff = Math.max(0, deadline - new Date());
    el.querySelector(".days").textContent = Math.floor(diff / 86400000);
    el.querySelector(".hours").textContent = Math.floor(diff / 3600000) % 24;
    el.querySelector(".mins").textContent = Math.floor(diff / 60000) % 60;
  }
  tick();
  setInterval(tick, 30000);
});

• replace(" ", "T") повороты 2026-10-24 19:30 в 2026-10-24T19:30, формат, который каждый браузер читает одинаково.
• isNaN(deadline) останавливает сценарий, когда дата пуста или не может быть прочитана.
• Чтение значения из атрибута данных позволяет каждому виджету на странице вести обратный отсчет до своей даты.

Токены также работают непосредственно в панели JS. В наших тестах, var deadline = "{{ event_date }}"; напечатал сохраненную дату. сохраните кавычки, потому что голая дата не является действительным JavaScript.

Сохраненное значение не имеет часового пояса Браузер читает его как местное время посетителя, поэтому обратный отсчет до 19:30 заканчивается в 19:30 в Лондоне и снова в 19:30 в Нью-Йорке, Для одного всемирного момента добавить смещение к строке перед анализом, например 2026-10-24T19:30:00+00:00.

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

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

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

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

• Обратный отсчет для запусков, продаж и вебинаров.
• Карты мероприятий, на которых указана дата рядом с названием и местом проведения.
• Предлагайте баннеры, которые скрывает сценарий, как только истечет крайний срок.
• Время открытия или закрытия, напечатанное в виджете расписания.

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

• Примите решение о включении времени, прежде чем редакторы будут использовать виджет. Формат меняется только для дат, выбранных после переключения. Значение сохранено как 2026-10-24 19:30 сохраняет свое время даже после того, как вы отключите время включения.
• Всегда обрабатывайте пустое значение. Заверните разметку {% if %} и проверьте недопустимую дату в сценарии.
• Планируйте даты в прошлом. Пример останавливается на нуле. также можно скрыть виджет или показать “Это событие завершило сообщение”.
• Используйте минутную прибавку 5, 15 или 30 для мероприятий, которые начинаются в час или полчаса.
• Напишите четкое описание. Скажите, является ли дата началом, концом или крайним сроком, поэтому редакторы выбирают правильную.

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

Завершая #

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