注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 。

• 基本用法

@click="showTimePicker">TimePicker

export default {
methods: {
showTimePicker () {
this.- createTimePicker({
showNow: true,
minuteStep: 5,
delay: 15,
onSelect: (selectedTime, selectedText) => {
this.- createDialog({
type: 'warn',
title: 选中的时间戳是 - {selectedTime},
content: ,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.- createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}).show()
}
}
}

showNow 用于控制是否显示“现在”时间，minuteStep 用于控制分钟的步长，delay 则表示的是当前时间向后推迟的时间，决定了最小可选时间。

export default {
methods: {
showTimePicker () {
this.- createTimePicker({
showNow: true,
minuteStep: 10,
delay: 10,
day: {
len: 5,
filter: ['今天', '明天'],
format: 'M月d日'
},
onSelect: (selectedTime, selectedText) => {
this.- createDialog({
type: 'warn',
title: 选中的时间戳是 - {selectedTime},
content: ,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.- createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
}).show()
}
}
}

day字段的len属性可以设置第一列需要展示的日期长度；

filer属性设置第一列日期展示的文案；

format属性用以格式化日期显示的方式，当len的数量大于filter的数组长度时，会以M月d日的格式显示文案。

• 手动设置时间

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) => {
this.- createDialog({
type: 'warn',
title: 选中的时间戳是 - {selectedTime},
content: ,
icon: 'cubeic-alert'
}).show()
},
onCancel: () => {
this.- createToast({
type: 'correct',
txt: 'Picker canceled',
time: 1000
}).show()
}
})

}
}

timePicker实例向外暴露setTime方法用以手动设置时间，时间格式为时间戳。当时间戳小于当前时间戳时，timePicker实例会默认显示当前时间。

• day 子配置项
  |参数|说明|类型|默认值
  |——-
  |len|日期列，从当前时间算起，往后推len天|Number|3
  |filter|日期列，将时间映射为filter中的文案内容|Array|['今日']
  |format|时间格式化|String|'M月D日'

原文: