city-casereport/miniprogram_npm/tdesign-miniprogram/date-time-picker/README.md
2023-12-06 14:22:42 +08:00

4.1 KiB
Raw Blame History

title description spline isComponent
DateTimePicker 时间选择器 用于选择一个时间点或者一个时间段。 form true

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker"
}

代码演示

组件类型

年月日选择器

{{ year-month-date }}

年月选择器

{{ year-month }}

时间选择器器

包括:时分秒时分两个示例

{{ time }}

年月日时分秒选择器

{{ date-all }}

组件用法

调整步数

{{ steps }}

API

DateTimePicker Props

名称 类型 默认值 说明 必传
cancel-btn String 取消 取消按钮文字 N
confirm-btn String - 确定按钮文字 N
end String / Number - 选择器的最大可选时间,默认为当前时间+10年 N
format String 'YYYY-MM-DD HH:mm:ss' 用于格式化 pick、change、confirm 事件返回的值,详细文档 N
header Boolean / Slot true 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容。通用类型定义 N
mode String / Array 'date' year = 年month = 年月date = 年月日hour = 年月日时; minute = 年月日时分当类型为数组时第一个值控制年月日第二个值控制时分秒。TS 类型:DateTimePickerMode type DateTimePickerMode = TimeModeValues | Array<TimeModeValues> type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second'详细类型定义 N
show-week Boolean false 【开发中】是否在日期旁边显示周几(如周一,周二,周日等) N
start String / Number - 选择器的最小可选时间,默认为当前时间-10年 N
steps Object - 时间间隔步数,示例:{ minute: 5 } N
title String - 标题 N
value String / Number - 选中值。TS 类型:DateValue type DateValue = string | number详细类型定义 N
default-value String / Number undefined 选中值。非受控属性。TS 类型:DateValue type DateValue = string | number详细类型定义 N
visible Boolean false 是否显示 N

DateTimePicker Events

名称 参数 描述
cancel - 取消按钮点击时触发
change (value: DateValue) 确认按钮点击时触发
close (trigger: TriggerSource) 1.0.1。关闭时触发。详细类型定义
type TriggerSource = 'overlay' | 'cancel-btn' | 'confirm-btn'
confirm (value: DateValue) 1.0.1。确认按钮点击时触发
pick (value: DateValue) 选中值发生变化时触发

DateTimePicker 外部样式类

类名 说明
t-class 根节点样式类
t-class-confirm 确认样式类
t-class-cancel 取消样式类
t-class-title 标题样式类

CSS 变量

组件提供了下列 CSS 变量,可用于自定义样式。

名称 默认值 描述
--td-data-time-picker-year-width 128rpx -