日期时间

的 日期 时间字段 给自定义小部件一个正确的日历选择器,而不是一个自由文本日期框编辑器单击元素器中的字段,flatpickr日历打开,他们选择一个日期(以及可选的时间),而不必担心输入小部件期望的格式在主插件内 小部件生成器中,这种一致性是全部:该值总是以可预测的格式到达,您的模板和脚本可以依赖。

"日期时间"字段支持 条件 就像每个控件一样,它的值通过打印 Twig-语法模板引擎的,所以你可以比较一下或者包进去 {% if %} blocks 在你的模板。两个指南都涵盖设置和限制。

Field 通过一个像每个简单值字段一样的令牌连接。打印 {{ event_date }} HTML面板中显示日期,或者将其交给JS面板,其中倒计时,开放时间检查或调度脚本可以解析它。

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

• 在小部件的 Elementor 面板中渲染点击打开日历选择器 (Flatpickr)。
• 可选地,在日历旁边包括时间选择器。
• 将 pick 存储为格式化的字符串,标准化为 Y-m-d H:i 启用时间或 Y-m-d 没有它。
• 通过打印 HTML、CSS 或 JS 面板中的任何字符串 {{ your_field_name }}.
• 直接馈送 JavaScript,这是倒计时和调度小部件的常用路线。

如果自定义小部件是新领域 小部件生成器概述 是更好的起点;这个页面假设你知道你在编辑器中的方式。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个事件倒计时小部件,其日期时间字段名为 event_date 小部件的脚本可以倒计时。

如何添加日期时间字段 #

拖动 日期时间 从字段面板到下面的部分 内容 tab。一旦它降落,它的选项就会在左侧打开。

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

• 标签: elementor 中选择器旁边显示的文本,例如 “事件日期”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 event_date.
• 默认: 小部件附带的起始日期字符串。
• 启用时间: 将一个小时和分钟选择器添加到日历中。打开它,值就会显示为 Y-m-d H:i (像XD)一样,在2019年1月1日开始,在2019年1月1日开始,在2019年1月1日开始,在2019 2026-12-31 18:00);随之而去,如同平原 Y-m-d 日期。
• 分钟增量: 分钟选择器移动的步骤,因此编辑器可以限制为 5、15 或 30 分钟时隙。
• 描述、显示标签、分离器: 标准显示选项,以及仅在另一个控件具有一定值时显示字段的条件。

在引擎盖下,采摘者接受一个 picker_options 具有进一步 Flatpickr 设置的对象,包括 noCalendar 对于一个只限时间的挑选者来说, dateFormat, time_24hr、和 minDate/maxDate bounds。builder UI 保留了常见的, 启用时间和分钟增量, 前面和中心, 运行时将存储值标准化为上述两种格式任一方式。

将日期时间字段与其令牌连接起来 #

Date Time 字段是一个令牌字段, 显示日期是 HTML 面板中的一个令牌:

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

JS面板比较常见的接线,因为数值是稳定的 Y-m-d H:i string, 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 }}"; works; 没有引号渲染值就是语法错误, 而且由于格式是由启用时间设置修复的, 所以提前决定你的脚本是否期望 2026-12-31 或 2026-12-31 18:00的,然后保持切换与之一致。

Elementor 中使用日期时间控件 #

Elementor 中将自定义小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。该字段显示为标签下的文本样式输入;单击它会打开日历弹出窗口。

Pick a day,并启用时间开启,将小时和分钟设置在日历下方,输入填写格式化的值和预览更新,编辑器从不手工键入日期,因此您的脚本解析的格式始终是到达的格式。

常见用例 #

• 倒计时小部件 对于发布会、销售和活动,由 JS 小组进行数学计算。
• 活动卡 它在场地和标题旁边打印格式化的日期。
• 限量优惠横幅 一旦截止日期过去,脚本就会隐藏。
• 预订和日程显示 打开或关闭时间为加价提供信息的地方。
• “发布”风格元数据 为自定义内容小部件。

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

• 将启用时间与作业匹配。 倒计时需要时间分量; “发布on”行不需要。存储的格式遵循切换。
• JS中引用令牌。 该值是一个字符串,未引用的日期会在脚本呈现的那一刻就破坏它。
• 解析前标准化。 将空间替换为 T(如倒计时示例)中保持 new Date() 跨浏览器解析一致。
• 未来设置默认值 对于倒计时小部件,因此新的下降会倒计时而不是显示零。
• 使用分钟增量来减少噪音。 15分钟的步长比任意分钟更容易挑选和阅读。
• 处理过去。 在脚本中决定截止日期过去后会发生什么:隐藏小部件、显示消息或停在零。

常见问题 #

包裹起来 #

Widget Builder 日期时间字段将日期条目从编辑器手中取出,并将可预测的字符串放入您的字符串中:面板中的一个选择器,模板中的一个令牌,以及脚本可以解析的格式,无需防御代码即可将其与 开关器字段 切换过期状态行为,或者 数字字段 对于可调的刷新间隔。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。