日期时间

"日期时间"字段将日历选择器添加到您使用主插件构建的自定义小部件中 小部件生成器。编辑器单击元素器中的字段,选择一天,如果允许,选择一个时间。小部件作为纯文本值获得选择,例如 2026-10-24 19:30式(HTML)中打印出来,也可以将其传递到倒计时脚本。

Date Time是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.

"日期时间"字段的作用 #

• Elementor 中为小部件的面板添加日期输入,单击它打开日历。
• 与 启用时间 on,日历下面有1个小时又1分钟的行,时钟总是24小时。
• 将选取的值保存为文本: Y-m-d H:i (例如) 2026-10-24 19:30)随着时间的推移,或者 Y-m-d (2026-10-24的)没有它。
• 打印该值,无论您将其令牌放置在何处,例如 {{ event_date }}、HTML、CSS 或 JS 面板中。

建筑商的新手?阅读 小部件生成器概述 首先,然后打开小部件返回。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget 生成器中打开的一个小部件,本指南中的示例是一个 “事件倒计时”小部件:一个名为 的文本字段 event_title、日期时间字段命名 event_date的,以及倒计时到那个日期的简短脚本。

如何添加日期时间字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 上 内容 tab,如果还没有,则添加一个部分,例如“event”。
3. 类型 date 在左侧的字段搜索框中。
4. 拖动 日期时间 into the section。点击字段上的铅笔, 打开它的设置。

日期 时间字段选项已解释 #

• 标签: elementor 中输入旁边的文本,例如 “事件日期”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 event_date.
• 描述: elementor中输入下显示的提示,例如“选择倒计时结束的日期和时间”
• 启用时间: 将小时和分钟行添加到日历中,然后从中切换保存的格式 Y-m-d 到 Y-m-d H:i.
• 分钟增量: 1 次点击箭头,分钟移动多远,默认是 1,用 15,箭头就跨过:00、:15、:30 和:45。
• 默认值: 新小部件副本的开始日期。

Default Value 框打开相同的日历,所以选择开始日期而不是键入它,启用时间时,时间行也出现在这里。

Countdown,选择一个默认的日期在未来。然后一个新的小部件立即倒计时,而不是显示零。

常见设置 #

• 显示标签 隐藏或显示面板中的标签。
• 标签块 输入上方将标签放在自己的线上。如果您的标签很长,请将其打开。
• 条件 仅当另一个控件具有一定值时才显示字段,例如 “显示倒计时”切换器。请参阅 条件.
• 分离器 在控件之前或之后绘制分隔线。

Responsive Control,动态支持,前端可用,控制类和选择器出现在每个字段中,您不需要它们中的任何一个来进行本指南中的设置,并且选择器可以保持为空,因为日期选择器不写入CSS。

Picker没有只使用时间的时钟或阻止过去日期的选择,编辑可以选择任何一天。

使用模板中的日期 #

在日期应显示的位置打印令牌。在事件倒计时小部件中,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>

的 {% if event_date %} check 事项,如果编辑器清空输入,令牌就不会打印任何内容,默认值不会再次使用,如果没有检查,倒计时就会显示 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) date为空或无法读取时停止脚本。
• 从数据属性读取值可以使页面上的每个小部件倒计时到其自己的日期。

Token 也直接在 JS 面板中工作,在我们的测试中, var deadline = "{{ event_date }}"; 打印保存的日期。保留报价,因为裸露日期无效 JavaScript。

Saved value 没有时区,浏览器读取为访客的当地时间,因此 19:30 的倒计时在伦敦 19:30 结束,纽约 19:30 再次结束,对于一个全球性的时刻,在解析之前先向字符串添加一个偏移量,例如 2026-10-24T19:30:00+00:00.

Elementor 中使用日期时间控件 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。该字段位于 内容 tab 在你的标签下,点击输入打开日历,选择一天,然后设置下面一行的小时和分钟,一挑就预览更新。

月份名称有下拉,年份是数字框,因此提前几个月不需要太多点击。

常见用例 #

• 发布会、销售和网络研讨会的倒计时。
• 显示标题和场地旁边日期的活动卡。
• 截止日期过后,提供脚本隐藏的横幅。
• 打开或关闭时间打印在时间表小部件中。

使用日期时间字段的技巧 #

• 在编辑器使用小部件之前决定启用时间。 格式仅更改切换后选择的日期。保存为 的值 2026-10-24 19:30 即使在关闭启用时间后也要保留其时间。
• 始终处理空值。 将标记包装进去 {% if %} 并检查脚本中的无效日期。
• 过去的日期计划。 示例在零处停止。您还可以隐藏小部件或显示 “此事件已结束”消息。
• 使用 5、15 或 30 的分钟增量 对于从一小时或半小时开始的活动。
• 写一个清晰的描述。 说日期是开始,结束还是截止日期,所以编辑选择正确的。

常见问题 #

包裹起来 #

将日期时间字段添加到内容部分,选择是否需要时间,然后打印 {{ event_date }} HTML 中或在 JS 面板中读取。检查空值,当编辑器清除日期时,小部件会保持不变。将其与 开关器字段 让编辑隐藏倒计时,然后查看 定价 对于每个计划包含的内容。