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

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

飞书低代码平台手册精选NaN-NaN-NaN
产品功能
适用场景
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)
设置是否只读
先进生产力和业务协同平台
联系我们立即试用

先进团队,先用飞书

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