TimePicker
组件提供了常用的日期选择功能。
注: 由于此组件基于 create-api 实现,所以在使用之前,请确保自己了解过 create-api。
基本用法
<cube-button @click="showTimePicker">TimePicker</cube-button>
export default {
methods: {
showTimePicker () {
this.$createTimePicker({
showNow: true,
minuteStep: 5,
delay: 15,
onSelect: (selectedTime, selectedText, formatedTime) => {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}).show()
}
}
}
showNow
用于控制是否显示“现在”时间,minuteStep
用于控制分钟的步长,delay
则表示的是当前时间向后推迟的时间,决定了最小可选时间。
日期选项配置
<cube-button @click="showTimePicker">TimePicker - day options</cube-button>
export default {
methods: {
showTimePicker () {
this.$createTimePicker({
showNow: true,
minuteStep: 10,
delay: 10,
day: {
len: 5,
filter: ['今天', '明天'],
format: 'M月d日'
},
onSelect: (selectedTime, selectedText, formatedTime) => {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}).show()
}
}
}
day
字段的len
属性可以设置第一列需要展示的日期长度;
filer
属性设置第一列日期展示的文案;
format
属性用以格式化日期显示的方式,当len
的数量大于filter
的数组长度时,会以M月d日
的格式显示文案。
Format 配置1.10.0+
通过 format
属性可配置 select
事件的 formatedTime
参数的格式。
<cube-button @click="showFormatPicker">Config format</cube-button>
export default {
methods: {
showFormatPicker() {
if (!this.formatPicker) {
this.formatPicker = this.$createTimePicker({
format: 'hh:mm',
onSelect: this.selectHandler,
onCancel: this.cancelHandler
})
}
this.formatPicker.show()
},
selectHandler(selectedTime, selectedText, formatedTime) {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
cancelHandler() {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}
}
分钟数的步长
通过 minuteStep
属性可配置分钟数的步长,默认为 10 分钟,这样的话,可选的分钟就是 10、20、30、40、50。另外在 v1.10.5+,minuteStep
还支持传入一个对象,你可以通过子属性 rule
配置取整的规则,是向上取整 ceil
,向下取整 floor
,又或是四舍五入round
。而子属性 step
则代表步长。
<cube-button @click="showMinuteStepPicker">Config minute step</cube-button>
export default {
methods: {
showFormatPicker() {
if (!this.minuteStepPicker) {
this.minuteStepPicker = this.$createTimePicker({
minuteStep: {
rule: 'ceil',
step: 15
},
onSelect: this.selectHandler,
onCancel: this.cancelHandler
})
}
this.minuteStepPicker.show()
},
selectHandler(selectedTime, selectedText, formatedTime) {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
cancelHandler() {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}
}
最小可选时间 min 1.12.6
你可以通过 min
属性设置最小可选时间。它可以接受 Date 类型的日期时间,也可以 Number类型的时间戳。
<cube-button @click="showMinPicker">Config min</cube-button>
export default {
methods: {
showMinPicker() {
if (!this.minPicker) {
this.minPicker = this.$createTimePicker({
min: +new Date() - (2 * 60 + 20) * 60 * 1000,
onSelect: this.selectHandler,
onCancel: this.cancelHandler
})
}
this.minPicker.show()
},
selectHandler(selectedTime, selectedText, formatedTime) {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
cancelHandler() {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}
}
最大可选时间 max 1.12.6
你可以通过 max
属性设置最大可选时间。它可以接受 Date 类型的日期时间,也可以 Number类型的时间戳。
<cube-button @click="showMaxPicker">Config max</cube-button>
export default {
methods: {
showMaxPicker() {
if (!this.maxPicker) {
this.maxPicker = this.$createTimePicker({
delay: 0,
max: +new Date() + ((2 * 24 + 2) * 60 + 20) * 60 * 1000,
onSelect: this.selectHandler,
onCancel: this.cancelHandler
})
}
this.maxPicker.show()
},
selectHandler(selectedTime, selectedText, formatedTime) {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
cancelHandler() {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}
}
手动设置时间
<cube-button @click="showTimePicker">TimePicker - setTime(next hour)</cube-button>
export default {
methods: {
const time = new Date().valueOf() + 1 * 60 * 60 * 1000
showTimePicker () {
const timePicker = this.$createTimePicker({
showNow: true,
minuteStep: 10,
delay: 15,
day: {
len: 5,
filter: ['今天', '明天', '后天'],
format: 'M月D日'
},
onSelect: (selectedTime, selectedText, formatedTime) => {
this.$createDialog({
type: 'warn',
title: `selected time: ${selectedTime}`,
content: `selected text: ${selectedText}<br>format time: ${formatedTime}`,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.$createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})
timePicker.setTime(time)
timePicker.show()
}
}
}
timePicker
实例向外暴露setTime
方法用以手动设置时间,时间格式为时间戳。当时间戳小于当前时间戳时,timePicker
实例会默认显示当前时间。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
day | 日期配置 | Object | { len: 3, filter: ['今日'], format: 'M月D日' } |
showNow | 是否显示现在;以及现在选项的文案1.9.0 | Boolean, Object1.9.0 | true |
minuteStep | 分钟数的步长。 当为 Object 时还可以配置取整规则,详见后续 minuteStep 子配置项说明1.10.5 | Number, Object1.10.5 | 10 |
delay | 将当前时间向后推算的分钟数,决定了最小可选时间(注:仅当未设置 min 时有效) | Number | 15 |
min1.12.6 | 最小可选时间 | Date, Number | null |
max1.12.6 | 最大可选时间 | Date, Number | null |
title | 标题 | String | '选择时间' |
subtitle1.8.1 | 副标题 | String | '' |
cancelTxt1.8.1 | 取消按钮文案 | String | '取消' |
confirmTxt1.8.1 | 确定按钮文案 | String | '确定' |
swipeTime | 快速滑动选择器滚轮时,惯性滚动动画的时长,单位:ms | Number | 2500 |
visible1.8.1 | 显示状态,是否可见。v-model 绑定值 | Boolean | false |
maskClosable1.9.6 | 点击蒙层是否隐藏 | Boolean | true |
format1.10.0 | select 事件参数 formatedTime 的格式 | String | 'YYYY/M/D hh:mm' |
zIndex1.9.6 | 样式 z-index 的值 | Number | 100 |
day
子配置项参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
len | 日期列,从当前时间算起,往后推len天(注:仅当未设置 max 时有效) | Number | 3 |
filter | 日期列,将时间映射为filter中的文案内容 | Array | ['今日'] |
format | 时间格式化 | String | 'M月D日' |
showNow
子配置项1.9.0参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
text | 现在选项的文案 | String | '现在' |
minuteStep
子配置项1.10.5参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
rule | 取整的规则(仅用于设置最小可选时间的取整规则,对于最大时间,固定为 floor) | String | floor/ceil/round | 'floor' |
step | 分钟数的步长 | Number | - | 10 |
事件名 | 说明 | 参数1 | 参数2 | 参数3 |
---|---|---|---|---|
select | 点击确认按钮触发此事件 | selectedTime: 当前选中的timestamp | selectText: 当前选中的时间文案 | formatedTime: 格式化日期1.10.0 |
change | 滚轴滚动后触发此事件 | index: 当前滚动列次序,Number类型 | selectedIndex: 当前列选中项的索引,Number类型 | - |
cancel | 点击取消按钮触发此事件 | - | - | - |
方法名 | 说明 | 参数 |
---|---|---|
setTime | 手动设置time-picker组件显示的时间,数据格式为时间戳 | 时间戳 |
show | 显示 | - |
hide | 隐藏 | - |