小程序已有的时间选择器与日期选择器无法支持自定义格式，需要使用多列选择器来定义
时间选择器仅支持hh:mm格式
日期选择器仅支持YYYY-MM-DD格式
因为项目要求的格式为DD:hh:mm，我找了好久，也没找到解决办法，决定自己使用多列选择器来实现该功能
range：属性值为数组，如果为单列，则传一维数组，如果为多列，则传二维数组
多列：图中为三列，所以参数格式为[ [数组1], [数组2 ], [ 数组3] ]
value: 属性值为数组，以上图为例，属性值为[0,0,1]，表示range属性值的第一个数组中索引为0，第二个数组索引为0，第三个数组索引为1
下面就是计算出来这个月中的天数，当天的小时数，以及分钟数，再将它们分别塞入range属性值中的对应数组中去
话不多说，直接上代码
html:
<picker mode="multiSelector" @change="bindMultiPickerChange" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
<view>指定时间发布</view>
</picker>js中的Data部分:
// 时间选择器
multiArray: [],
multiIndex: [0, 0, 0],
year: '',
month: '',
day: '',
hour: '',
minute: '',
// 时间选择器数据
surplusDay: [],
surplusHour: [],
surplusMinute: []js中的日期处理方法：文章来源：https://www.toymoban.com/news/detail-495148.html
bindMultiPickerChange () {
wx.showToast({
title: '敬请期待',
icon: 'none'
})
},
// 某一列的值改变时触发
bindMultiPickerColumnChange (e) {
let date = new Date()
let year1 = date.getFullYear()
let month1 = date.getMonth() + 1
let day1 = date.getDate()
let hour1 = date.getHours()
console.log('修改的列为', e.mp.detail.column, '，值为', e.mp.detail.value)
this.multiIndex[e.mp.detail.column] = e.mp.detail.value
let a = this.multiArray[e.mp.detail.column][e.mp.detail.value]
console.log('我的值为', a)
let data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex,
year: this.year,
month: this.month,
day: this.day,
hour: this.hour,
minute: this.minute
}
data.multiIndex[e.mp.detail.column] = e.mp.detail.value
switch (e.mp.detail.column) {
case 0:
console.log('选择天数' + data.multiArray[e.mp.detail.column][e.mp.detail.value])
let dayStr = data.multiArray[e.mp.detail.column][e.mp.detail.value]
let day = dayStr.substring(0, dayStr.length - 1)
data.day = parseInt(day)
if (data.year === year1 && month1 === data.month && data.day === day1) {
this.surplusHour = this.surplusHourArray(this.year, this.month, this.day, this.hour)
this.surplusMinute = this.surplusMinuteArray(this.year, this.month, this.day, this.hour, this.minute)
} else {
this.surplusHour = this.surplusHourArray(this.year, this.month, data.day, 0)
this.surplusMinute = this.surplusMinuteArray(this.year, this.month, data.day, 0, 0)
}
this.multiArray[1] = this.surplusHour
this.multiArray[2] = this.surplusMinute
this.multiIndex[1] = 0
this.multiIndex[2] = 0
console.log('小时的集合', this.surplusHour)
break
case 1:
console.log('选择时间' + data.multiArray[e.mp.detail.column][e.mp.detail.value])
let hourStr = data.multiArray[e.mp.detail.column][e.mp.detail.value]
let hour = hourStr.substring(0, hourStr.length - 1)
data.hour = parseInt(hour)
if (data.year === year1 && month1 === data.month && data.day === day1 && data.hour === hour1) {
this.surplusMinute = this.surplusMinuteArray(this.year, this.month, this.day, this.hour, this.minute)
} else {
this.surplusMinute = this.surplusMinuteArray(this.year, this.month, this.day, data.hour, 0)
}
this.multiArray[2] = this.surplusMinute
this.multiIndex[2] = 0
console.log('小时的集合', this.surplusHour)
break
}
// this.setData(data)
},
// 月份计算
surplusMonth (year) {
let date = new Date()
let year2 = date.getFullYear()
let month = date.getMonth() + 1
let monthDatas = []
if (year === year2) {
monthDatas.push(month + '月')
for (let i = month; i < 12; i++) {
monthDatas.push(i + 1 + '月')
}
} else {
for (let i = 0; i < 12; i++) {
monthDatas.push(i + 1 + '月')
}
}
return monthDatas
},
// 天数计算
surplusDayArray (year, month, day) {
let days = 31
let dayDatas = []
let date = new Date()
let year2 = date.getFullYear()
let month2 = date.getMonth() + 1
switch (parseInt(month)) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
days = 31
break
// 对于2月份需要判断是否为闰年
case 2:
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
days = 29
break
} else {
days = 28
break
}
case 4:
case 6:
case 9:
case 11:
days = 30
break
}
if (year === year2 && month === month2) {
dayDatas.push(day + '日')
for (var i = day; i < days; i++) {
dayDatas.push(i + 1 + '日')
}
} else {
console.log(month + '月' + days + '天')
for (let i = 0; i < days; i++) {
dayDatas.push(i + 1 + '日')
}
}
return dayDatas
},
// 时间计算
surplusHourArray (year, month, day, hour) {
let date = new Date()
let year2 = date.getFullYear()
let month2 = date.getMonth() + 1
let day2 = date.getDate()
let hours = []
if (year === year2 && month === month2 && day === day2) {
hours.push(hour + '时')
for (let i = hour; i < 23; i++) {
hours.push(i + 1 + '时')
}
} else {
for (let i = 0; i < 24; i++) {
hours.push(i + '时')
}
}
return hours
},
// 分钟计算
surplusMinuteArray (year, month, day, hour, minute) {
let date = new Date()
let year2 = date.getFullYear()
let month2 = date.getMonth() + 1
let day2 = date.getDate()
let hour2 = date.getHours()
let minutes = []
if (year === year2 && month === month2 && day === day2 && hour === hour2) {
minutes.push(minute + '分')
for (let i = minute; i < 59; i++) {
minutes.push(i + 1 + '分')
}
} else {
for (let i = 0; i < 60; i++) {
minutes.push(i + '分')
}
}
console.log('分钟', minutes)
return minutes
}
}最后是onLoad加载时的代码块：文章来源地址https://www.toymoban.com/news/detail-495148.html
onLoad () {
let date = new Date()
this.year = date.getFullYear()
this.month = date.getMonth() + 1
this.day = date.getDate()
this.hour = date.getHours()
this.minute = date.getMinutes()
// const surplusMonth = this.surplusMonth(year)
//初始化range属性中的数据
this.surplusDay = this.surplusDayArray(this.year, this.month, this.day)
this.surplusHour = this.surplusHourArray(this.year, this.month, this.day, this.hour)
this.surplusMinute = this.surplusMinuteArray(this.year, this.month, this.day, this.hour, this.minute)
this.multiArray = [this.surplusDay, this.surplusHour, this.surplusMinute]
console.log('this.multiArray', this.multiArray)
}到了这里，关于vue小程序，自定义时间选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
