water_xcx/miniprogram_npm/tdesign-miniprogram/date-time-picker/README.md

3.5 KiB
Raw Permalink 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-min }}

选择日期时间(年月日时分)

{{ date-all }}

API

DateTimePicker Props

名称 类型 默认值 说明 必传
cancel-btn String 取消 取消按钮文字 N
confirm-btn String - 确定按钮文字 N
end String / Number - 选择器的结束时间 N
external-classes Array - 组件类名,分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名。['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'] N
footer Slot true 底部内容 N
format String '' 用于格式化日期,详细文档 N
header Boolean / Slot true 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容,值类型为 TNode 表示自定义头部内容 N
mode String / Array 'date' year = 年month = 年月date = 年月日hour = 年月日时; minute = 年月日时分当类型为数组时第一个值控制年月日第二个值控制时分秒。TS 类型:DateTimePickerMode `type DateTimePickerMode = TimeModeValues Array type TimeModeValues = 'year'
show-week Boolean false 【开发中】是否在日期旁边显示周几(如周一,周二,周日等) N
start String / Number - 选择器的开始时间 N
title String - 标题 N
value String / Number - 选中值。TS 类型:DateValue `type DateValue = string number`。详细类型定义
default-value String / Number undefined 选中值。非受控属性。TS 类型:DateValue `type DateValue = string number`。详细类型定义
visible Boolean false 是否显示 N

DateTimePicker Events

名称 参数 描述
cancel - 取消按钮点击时触发
change (value: DateValue) 确认按钮点击时触发
pick (value: DateValue) 选中值发生变化时触发