picker组件实现年月日时分秒的选择
官网参考：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
参数参考：
多列选择器：mode = multiSelector
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
|---|---|---|---|---|
| range | array/object array | [] | mode 为 selector 或 multiSelector 时，range 有效 | |
| range-key | string | 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | ||
| value | array | [] | 表示选择了 range 中的第几个（下标从 0 开始） | |
| bindchange | eventhandle | value 改变时触发 change 事件，event.detail = {value} | ||
| bindcolumnchange | eventhandle | 列改变时触发 |
实现效果：
picker.gif
代码：
<template>
<div>
<!-- 多列选择：年月日时分秒 -->
<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnchange">
<view>时间选择：<span style="color: grey;">{{time || placeholder}}</span></view>
</picker>
</div>
</template>
<script>
export default {
data () {
return {
multiIndex: [],
multiArray: [],
placeholder: '请选择',
time: '',
dateNum: 31 // 天数
}
},
onReady () {
this.newMultiArray()
this.getCurrentTime()
},
created () {},
watch: {
multiIndex (val, oldVal) {
if ((val !== oldVal)) {
this.multiIndex = val
}
}
},
computed: {},
methods: {
// rang数组
newMultiArray () {
this.multiArray = [this.years(), this.months(), this.days('', ''), this.hours(), this.minutes(), this.seconds()]
},
years () {
const date = new Date()
const years = []
for (let i = 1970; i <= date.getFullYear() + 100; i++) {
years.push('' + i)
}
return years
},
months () {
const months = []
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = '0' + i
}
months.push('' + i)
}
return months
},
days (year, month) {
if (year && month) {
switch (parseInt(month)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
this.dateNum = 31
break
case 4:
case 6:
case 9:
case 11:
this.dateNum = 30
break
// 对于2月份需要判断是否为闰年
case 2:
if (((year % 400 === 0) || (year % 100 !== 0)) && (year % 4 === 0)) {
this.dateNum = 29
break
} else {
this.dateNum = 28
break
}
}
}
const days = []
for (let i = 1; i <= Number(this.dateNum); i++) {
if (i < 10) {
i = '0' + i
}
days.push('' + i)
}
if (year && month) this.multiArray[2] = days
return days
},
hours () {
const hours = []
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = '0' + i
}
hours.push('' + i)
}
return hours
},
minutes () {
const minutes = []
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = '0' + i
}
minutes.push('' + i)
}
return minutes
},
seconds () {
const seconds = []
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = '0' + i
}
seconds.push('' + i)
}
return seconds
},
// 获取当前时间
getCurrentTime (val) {
this.formTime = val
let data = new Date()
let year = ''
let month = ''
let day = ''
let hour = ''
let minute = ''
let second = ''
let yearNum = 0
let monthNum = 0
let dayNum = 0
let hourNum = 0
let minuteNum = 0
let secondNum = 0
if (!this.formTime) {
// 获取当前时间
year = data.getFullYear()
month = data.getMonth() + 1
day = data.getDate()
hour = data.getHours()
minute = data.getMinutes()
second = data.getSeconds()
} else {
let timeArr = this.formTime.replace(' ', ':').replace(/:/g, '-').split('-')
year = Number(timeArr[0])
month = Number(timeArr[1])
day = Number(timeArr[2])
hour = Number(timeArr[3])
minute = Number(timeArr[4])
second = Number(timeArr[5])
}
this.days(year, month) // 判断当前年月的天数
for (let i = 1970; i <= data.getFullYear() + 100; i++) {
yearNum = yearNum + 1
if (i === year) break
}
for (let i = 1; i <= 12; i++) {
monthNum = monthNum + 1
if (i === month) break
}
for (let i = 1; i <= 31; i++) {
dayNum = dayNum + 1
if (i === day) break
}
for (let i = 0; i <= 24; i++) {
hourNum = hourNum + 1
if (i === hour) break
}
for (let i = 0; i <= 60; i++) {
minuteNum = minuteNum + 1
if (i === minute) break
}
for (let i = 0; i <= 60; i++) {
secondNum = secondNum + 1
if (i === second) break
}
this.multiIndex = [yearNum - 1, monthNum - 1, dayNum - 1, hourNum - 1, minuteNum - 1, secondNum - 1]
},
// 监听滚动事件
bindMultiPickerColumnchange (e) {
let value = e.mp.detail.value
let column = e.mp.detail.column
var dayChange = {
multiArray: this.multiArray,
multiIndex: this.multiIndex,
year: '',
month: ''
}
dayChange.multiIndex[column] = value
switch (column) {
// 年
case 0:
dayChange.year = this.multiArray[column][value]
if (dayChange.year === this.multiArray[0][this.multiIndex[0]]) {
dayChange.month = this.multiArray[1][this.multiIndex[1]]
} else {
dayChange.month = 1
}
break
// 月
case 1:
dayChange.year = this.multiArray[0][this.multiIndex[0]]
dayChange.month = this.multiArray[column][value]
break
}
this.days(dayChange.year, dayChange.month)
},
// 选择
bindMultiPickerChange (e) {
this.multiIndex = e.mp.detail.value
const index = this.multiIndex
const year = this.multiArray[0][index[0]]
const month = this.multiArray[1][index[1]]
const day = this.multiArray[2][index[2]]
const hour = this.multiArray[3][index[3]]
const minute = this.multiArray[4][index[4]]
const second = this.multiArray[5][index[5]]
this.time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}
}
}
</script>
<style lang="less" scoped>
</style>
