需求
使用
van-datetime-picker组件写时间选择时，不支持选择 “秒”要求能够选择精确到秒
代码
封装组件 TimePicker
<template>
<div>
<!-- 弹出层 -->
<van-popup get-container="body" v-model="isPicker" position="bottom" @close="confirmOn">
<!-- 时间选择 -->
<van-picker
ref="pickerRef"
show-toolbar
title="请选择时间"
:columns="columns"
@change="onChange"
@cancel="cancelOn"
@confirm="onConfirm"
/>
</van-popup>
</div>
</template>
<script>
import _ from 'lodash.clonedeep'
const currentYear = new Date().getFullYear()
const currentMonth = new Date().getMonth() + 1
const currentDate = new Date().getDate()
const currentHour = new Date().getHours()
const currentMinute = new Date().getMinutes()
const currentSecond = new Date().getSeconds()
export default {
name: 'TimePicker',
props: ['showPicker', 'values', 'maxDate'],
data() {
return {
isPicker: false, // 是否显示弹出层
columns: [], // 所有时间
Mdays: '', // 弹窗关闭时月份所在值
Dindex: null
}
},
watch: {
isPicker(val) {
!val && this.$emit('changeValue')
this.columns = []
this.getcolumns()
},
showPicker(val) {
this.isPicker = val
},
values(val) {
if (val === '') {
this.Mdays = ''
this.Dindex = null
}
}
},
methods: {
getCountDays(year, month) {
// 获取某年某月多少天
var day = new Date(year, month, 0)
return day.getDate()
},
getcolumns() {
var strtime = this.values
console.log('strtime----', strtime)
var date = new Date(strtime)
var vmoduletime = date.getTime()
var vmoduledate = null
if (this.values !== '') {
vmoduledate = new Date(vmoduletime)
} else {
vmoduledate = new Date() // 没有传入时间则默认当前时刻
}
var Y = vmoduledate.getFullYear()
var M = vmoduledate.getMonth()
var D = vmoduledate.getDate()
var h = vmoduledate.getHours()
var m = vmoduledate.getMinutes()
var s = vmoduledate.getSeconds()
/** ** 获取最大可选时间前十年数组 ****/
var year = {
}
year.values = []
var Currentday = this.maxDate.getFullYear()
for (var i = Currentday - 10; i <= Currentday; i++) {
year.values.push(i + '年')
}
year.defaultIndex = year.values.indexOf(Y + '年') // 设置默认选项当前年
this.columns.push(year)
/** ** 获取当前时间 “月” 数组 currentMonth ****/
var month = {
}
month.defaultIndex = M
month.values = Object.keys(Array.apply(null, {
length: currentMonth + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + '月'
} else if (+item + 1 === 11) {
return +item + '月'
} else {
return (+item + 0).toString() + '月'
}
})
month.values.splice(0, 1)
this.columns.push(month)
/** ** 获取当前 “日” 数组 currentDate ****/
var day = {
}
day.defaultIndex = this.Dindex === null ? D - 1 : this.Dindex
day.values = Object.keys(Array.apply(null, {
length: currentDate + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + '日'
} else if (+item + 1 === 11) {
return +item + '日'
} else {
return (+item + 0).toString() + '日'
}
})
day.values.splice(0, 1)
this.columns.push(day)
/** ** 获取当前 “时” 数组 currentHour ****/
var hour = {
} // 创建小时数组
hour.defaultIndex = h
hour.values = Object.keys(Array.apply(null, {
length: currentHour + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + '时'
} else if (+item + 1 === 11) {
return +item + '时'
} else {
return (+item + 0).toString() + '时'
}
})
this.columns.push(hour)
/** ** 获取当前 “分” 数组 currentMinute ****/
var mi = {
}
mi.defaultIndex = m
mi.values = Object.keys(Array.apply(null, {
length: currentMinute + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + '分'
} else if (+item + 1 === 11) {
return +item + '分'
} else {
return (+item + 0).toString() + '分'
}
})
this.columns.push(mi)
/** ** 获取当前 “秒” 数组 currentSecond ****/
var ss = {
}
ss.defaultIndex = s
ss.values = Object.keys(Array.apply(null, {
length: currentSecond + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + '秒'
} else if (+item + 1 === 11) {
return +item + '秒'
} else {
return (+item + 0).toString() + '秒'
}
})
this.columns.push(ss)
},
onChange(values, a) {
/** ** 判断是当前年 - 限制月最大只能是当前月 ****/
if (a[0].indexOf(currentYear) !== -1) {
console.log('"当前年"----', '当前年')
this.resetHandler(a, currentMonth, 1, '月')
} else {
this.resetHandler(a, 12, 1, '月')
}
/** ** 判断是当前月 - 限制日最大只能是当前日 ****/
if (a[0].indexOf(currentYear) !== -1 && a[1].indexOf(currentMonth) !== -1) {
console.log('"当前月"----', '当前月')
this.resetHandler(a, currentDate, 2, '日')
} else {
var days = this.getCountDays(currentYear, a[1].slice(0, 2))
this.resetHandler(a, days, 2, '日')
}
/** ** 判断是当前日 - 限制时最大只能是当前时 ****/
if (a[0].indexOf(currentYear) !== -1 && a[1].indexOf(currentMonth) !== -1 && a[2].indexOf(currentDate) !== -1) {
console.log('"当前日"----', '当前日')
this.resetHandler(a, currentHour, 3, '时')
} else {
this.resetHandler(a, 24, 3, '时')
}
/** ** 判断是当前时 - 限制分最大只能是当前分 ****/
if (
a[0].indexOf(currentYear) !== -1 &&
a[1].indexOf(currentMonth) !== -1 &&
a[2].indexOf(currentDate) !== -1 &&
a[3].indexOf(currentHour) !== -1
) {
console.log('"当前时"----', '当前时')
this.resetHandler(a, currentMinute, 4, '分')
} else {
this.resetHandler(a, 59, 4, '分')
}
/** ** 判断是当前分 - 限制秒最大只能是当前秒 ****/
if (
a[0].indexOf(currentYear) !== -1 &&
a[1].indexOf(currentMonth) !== -1 &&
a[2].indexOf(currentDate) !== -1 &&
a[3].indexOf(currentHour) !== -1 &&
a[4].indexOf(currentMinute) !== -1
) {
console.log('"当前分"----', '当前分')
this.resetHandler(a, currentSecond, 5, '秒')
} else {
this.resetHandler(a, 59, 5, '秒')
}
},
// 重新设置 月、日、时、分、秒
resetHandler(currentTimeList, setLength, setIndex, unit) {
var newData = {
} // 获取 setLength 即将设置长度数组
newData.values = Object.keys(Array.apply(null, {
length: setLength + 1 })).map(item => {
if (+item + 1 <= 10) {
return '0' + item + unit
} else if (+item + 1 === 11) {
return +item + unit
} else {
return (+item + 0).toString() + unit
}
})
newData.values.splice(0, 1)
this.$refs.pickerRef.setColumnValues(setIndex, _(newData.values)) // 设置第 setIndex 列的值
this.$refs.pickerRef.setColumnIndex(setIndex, currentTimeList[setIndex].substr(0, 2) - 1) // 设置第 setIndex 列索引
},
// 关闭弹框
confirmOn() {
var currentM = this.$refs.pickerRef.getColumnValue(1)
this.Mdays = currentM.substr(0, 2)
this.Dindex = this.$refs.pickerRef.getColumnIndex(2)
},
// 时间选择器关闭
cancelOn() {
this.$emit('changeValue')
},
// 时间选择器确定
onConfirm(val, index) {
var endval =
val[0].substr(0, 4) +
'-' +
val[1].substr(0, 2) +
'-' +
val[2].substr(0, 2) +
' ' +
val[3].substr(0, 2) +
':' +
val[4].substr(0, 2) +
':' +
val[5].substr(0, 2)
this.$emit('changeValue', endval)
this.$emit('confirm', endval)
}
}
}
</script>
组件使用
<template>
<!-- <van-popup v-model="isShowTimePicker" position="bottom">
<van-datetime-picker
type="datetime"
title="选择时间"
v-model="datePickerCurrentTime"
:max-date="maxDate"
@confirm="onConfirmTime"
@cancel="isShowTimePicker = false"
/>
</van-popup> -->
<timePicker
ref="popup"
:max-date="maxDate"
:values="datePickerCurrentTime"
:showPicker="isShowTimePicker"
@changeValue="isShowTimePicker = false"
@confirm="onConfirmTime"
/>
</template>
<script>
export default {
data() {
return {
maxDate: new Date(),
datePickerCurrentTime: new Date(), // 时间选择器当前选值，默认是当前时间
isShowTimePicker: false,
}
},
methods: {
onConfirmTime(val) {
...
this.isShowTimePicker = false
},
}
}
</script>
效果展示
参考：https://blog.csdn.net/shids_/article/details/129492814
自己改了下：限制最大可选择时间