跳到主要内容
版本:v2.0.0-zh

日期选择器

Datepicker 小部件允许用户从预先确定的集合中选择日期和时间的单个值。

ToolJet - 小部件参考 - 日期选择器

如何使用日期选择器小部件

活动

要将事件添加到日期选择器组件,请单击小部件句柄以打开右侧栏中的小部件属性。转到 Events 部分并单击 + 添加处理程序

在选择

选择日期时会触发 On select 事件。

信息

查看 Action Reference 文档以获取有关所有 Actions 的详细信息。

特性

默认值

该值充当日期选择器小部件的占位符,如果未提供任何值,则将使用选择器中的默认值。对于 格式 字段,默认值需要是一个 字符串 。例如:如果格式设置为 MM/YYYY ,则提供默认值 04/2022

格式

日期选择器选择的日期格式。默认日期格式为 DD/MM/YYYY。日期格式应遵循 moment 文档 中提到的 ISO 8601。此字段需要 字符串 输入。例如:DD/MMMM/YYYYYY/MMDD/MM/YYYY 等。

###启用时间选择?

打开或关闭以启用时间选择。您可以通过单击 Fx 来设置值 {{true}}{{false}} ,以编程方式确定该值。

启用日期选择?

打开或关闭以启用日期选择。您可以通过单击 Fx 来设置值 {{true}}{{false}} ,以编程方式确定该值。

禁用日期

我们可以给 disabled dates 属性,这将使特定的日期被禁用并且不能被选择。默认值需要是一个字符串数组。

禁用 1 月 9 日的示例:

{{['09-01']}}

现在用户将无法选择提到的日期,因为它将被禁用。

验证

自定义验证

使用三元运算符为小部件中的日期输入添加验证。

选择当前日期之后的日期的验证示例:

{{moment(components.datepicker1.value, 'DD/MM/YYYY').isAfter(moment())true : '日期应该在今天之后'}}

一般的

工具提示

当用户将鼠标指针悬停在小部件上时,工具提示通常用于指定有关某事的额外信息。

通用 折叠栏下,您可以设置字符串格式的值。现在将鼠标悬停在小部件上会将字符串显示为工具提示。

ToolJet - 小部件参考 - 日期选择器

布局

在桌面上显示

打开或关闭以在桌面视图中显示小部件。您可以通过单击 Fx 来设置值 {{true}}{{false}} ,以编程方式确定该值。

在手机上显示

打开或关闭以在移动视图中显示小部件。您可以通过单击 Fx 来设置值 {{true}}{{false}} ,以编程方式确定该值。

风格

可见性

这是为了控制小部件的可见性。如果为 {{false}},则在部署应用程序后小部件将不可见。它只能有布尔值,即 {{true}}{{false}}。默认情况下,它设置为 {{true}}

禁用

此属性只接受布尔值。如果设置为 {{true}},小部件将被锁定并变得无法使用。默认情况下,它的值设置为 {{false}}

边界半径

使用此属性修改日期选择器的边框半径。该字段只需要从 1100 的数值,默认为 0

信息

任何在其字段旁边具有 Fx 按钮的属性都可以以编程方式配置