日期时间选择-桌面端|飞书低代码平台 - 飞书官网
产品功能

日期时间选择-桌面端|飞书低代码平台

飞书

2024-12-23

适用场景​
使用说明​
属性API​
方法API​
适用场景​
datePicker,用于选择日期时间。​
使用说明​
​
区域​
说明​
示意图​
内容区​
  • 默认值​
  • 日期选择的默认值类型是string​
  • 默认值会在组件初始化、重置、以及依赖的变量发生变化后生效​
  • 日期格式​
  • 时间格式​
  • 分钟步长​
  • 日期时间选择器分钟步长​
  • 示意图(下图设置分钟步长为10min)​
​
250px|700px|reset
​
​
  • 占位符​
  • 占位符属性的类型是string​
  • 时区设置​
  • 开启时区设置后可以设置「展示时区」和「组件值时区」​
  • 通过日期时间选择器输入的值,会根据「组件值时区」转换为时间戳​
例如2024-06-29 17:00转换为时间戳为1719651637700​
如果设置「组件值时区」为中国标准时间(UTC+8:00),则2024-06-29 17:00转换为时间戳为1719651600000​
  • 组件会将时间戳根据「展示时区」设置的时区进行展示​
如果设置「组件值时区」为中国标准时间(UTC+8:00),则2024-06-29 17:00转换为时间戳为1719651600000​
设置「展示时区」为协调世界时(UTC),则组件上会展示为2024-06-29 09:00​
  • 拓展​
  • 标题​
​
250px|700px|reset
​
​
  • 后缀图标​
内容区示意图​
​
250px|700px|reset
​
​
​
交互区​
  • form data key​
  • 表单内的输入类组件配置了「form data key」后,表单可获取到该组件的值。​
比如,文本输入组件的「form data key」配置为"first_name",表单的data信息中会包含"first_name",并且其值为该文本输入组件的值,可以通过{ { form.data.first_name } }消费该组件的值​
  • 同一个表单内有多个相同「form data key」时,均不会生效​
  • 事件​
  • 支持3种事件:「值改变时」、「聚焦时」、「失焦时」​
  • 校验​
  • 校验时机:聚焦时、值改变时、表单提交时(如在表单内)​
  • 校验内容:​
  • 必填​
  • 最早可选日期​
  • 若开启「时区选择」,此处填入的是“组件值时区”的日期,要求格式 YYYY-MM-DD,举例:2023-08-08​
  • 最晚可选日期​
  • 若开启「时区选择」,此处填入的是“组件值时区”的日期,要求格式 YYYY-MM-DD,举例:2023-08-08​
  • 最早可选时间​
  • 若开启「时区选择」,此处填入的是“组件值时区”的时间,要求格式 HH:mm,举例:23:22​
  • 最晚可选时间​
  • 若开启「时区选择」,此处填入的是“组件值时区”的时间,要求格式 HH:mm,举例:23:22​
  • 自定义校验规则​
  • 可以通过js表达自定义校验规则​
示例:{ {self.value === 'test' ? 'error': ''} }​
  • 只读​
  • boolean类型​
  • 禁用​
  • boolean类型​
  • 加载中​
  • boolean类型​
​
250px|700px|reset
​
​
​
外观区​
  • 清空按钮​
  • 当日期选择组件的值不为空的时候,hover到组件上会出现清空按钮,支持一键清空组件的值​
  • 隐藏​
  • boolean类型,控制输入组件是否在页面上隐藏​
​
​
250px|700px|reset
​
​
​
属性 API​
​
属性​
类型​
默认值​
描述​
label​
object ​
​
​
{​
textContent:"标题",​
tooltipText:"",​
wrapping:false,​
layout:"top",​
align:"left",​
width:4,​
unit:"col"​
}​
​
聚合标题相关的属性​
聚合标题相关的属性,包含:​
  1. 标题内容textContent​
  1. 标题提示内容tooltipText​
  1. 超出折行wrapping​
  1. 标题文本对齐方式align​
  1. 标题位置layout​
  1. 标题宽度width​
  1. 标题宽度单位unit​
loading​
boolean​
false​
是否显示加载中​
formDataKey​
string​
{ { self.id } }​
默认为组件id​
值标识​
disabled​
boolean​
false​
是否禁用​
hidden​
boolean​
false​
是否隐藏​
readOnly​
boolean​
false​
是否只读​
rules​
json​
{}​
​
​
示例​
rules:{​
required:false,​
minDate:"2024-01-01",​
maxDate:"2024-01-02",​
minTime:"09:00",​
maxTime:"10:00",​
custom:""​
}​
​
placeholder​
String​
请选择​
占位符​
showClear​
boolean​
true​
是否开启清空按钮​
dateFormat​
String​
"YYYY-MM-DD"​
日期格式​
timeFormat​
String​
"H:mm"​
时间格式​
format​
String​
"YYYY-MM-DD H:mm"​
日期时间格式​
formattedValue​
String​
""​
根据设置的日期和时间格式输入的值​
suffixIcon​
String​
"icon_calendar_outlined"​
前缀图标​
manageTimeZone​
boolean​
false​
是否开启时区设置​
displayTimeZone​
String​
undefined​
展示时区​
valueTimeZone​
String​
undefined​
组件值时区​
step​
number​
15​
分钟步长​
​
​
​
方法 API​
​
方法​
说明​
setValue(value: boolean | string | number | void)​
设置组件值​
clearValue()​
清空组件值​
validate()​
触发校验​
clearValidation()​
清空校验状态​
reset()​
重置组件值​
setDisabled(disabled: boolean)​
设置是否禁用​
setLoading(loading:boolean)​
设置是否加载中​
setHidden(visible:boolean)​
设置是否隐藏​
setReadOnly(readOnly:boolean)​
设置是否只读​
​
预约飞书企业效能顾问 深度诊断企业痛点,定制专属 AI 办公方案

先进团队,先用飞书

欢迎联系我们,飞书效能顾问将为您提供全力支持
分享先进工作方式
输送行业最佳实践
全面协助组织提效
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题

字节跳动旗下 AI 工作平台

联系我们立即试用