首先看下最终效果
设置数据
import moment from 'moment';
const dateArr = []
for(let i = 0;i<50;i++) { // 默认50天
const itemDate = moment().add(i,'day');
const d = itemDate.day();
let week = '';
if(d === 0){ week = '日' }
if(d === 1){ week = '一' }
if(d === 2){ week = '二' }
if(d === 3){ week = '三' }
if(d === 4){ week = '四' }
if(d === 5){ week = '五' }
if(d === 6){ week = '六' }
dateArr.push({
name:`${itemDate.format('MM月DD日')} 周${week}`,
value:itemDate.format('YYYY-MM-DD')
})
}
const timeHHArr = [];
for(let i = 0;i<24;i++) {
let str = i<10?`0${i}`:`${i}`
timeHHArr.push({name:str,value:str})
}
const timeMMArr = [];
for(let i = 0;i<60;i++) {
let str = i<10?`0${i}`:`${i}`
timeMMArr.push({name:str,value:str})
}
view
<view class="uni-datetime-picker">
<picker mode="multiSelector"
:value="dateTimeIndex"
:range="dateTimeArray"
range-key="name"
@change="dateTimeChange">
<view class="uni-input">
<text>{{moment(travelDate).format('MM月DD日 HH:mm')}}</text>
</view>
</picker>
</view>
js
export default{
data(){
return{
travelDate :'',
moment:moment
}
},
methods:{
dateTimeChange(e) {
const d = dateArr[e.detail.value[0]].value
const h = timeHHArr[e.detail.value[1]].value
const m = timeMMArr[e.detail.value[2]].value
this.travelDate = `${d} ${h}:${m}`
}
}
}
完整代码
<template>
<view>
<picker mode="multiSelector"
:value="dateTimeIndex" :range="dateTimeArray" range-key="name" @change="dateTimeChange">
<view class="uni-input">
<text v-if="travelDate===''" style="color:#bbb">请选择</text>
<text v-else>{{moment(travelDate).format('MM月DD日 HH:mm')}}</text>
</view>
</picker>
</view>
</template>
<script>
import moment from 'moment';
const dateTimeObj = (() => {
const dateArr = []
for(let i = 0;i<50;i++) { // 默认50天
const itemDate = moment().add(i,'day');
const d = itemDate.day();
let week = '';
if(d === 0){ week = '日' }
if(d === 1){ week = '一' }
if(d === 2){ week = '二' }
if(d === 3){ week = '三' }
if(d === 4){ week = '四' }
if(d === 5){ week = '五' }
if(d === 6){ week = '六' }
dateArr.push({name:`${itemDate.format('MM月DD日')} 周${week}`,value:itemDate.format('YYYY-MM-DD')})
}
const timeHHArr = [];
for(let i = 0;i<24;i++) {
let str = i<10?`0${i}`:`${i}`
timeHHArr.push({name:str,value:str})
}
const timeMMArr = [];
for(let i = 0;i<60;i++) {
let str = i<10?`0${i}`:`${i}`
timeMMArr.push({name:str,value:str})
}
return {
dateArr,
timeHHArr,
timeMMArr
}
})()
export default {
components: {},
data() {
return {
travelDate:'',
moment:moment,
dateTimeArray: [
dateTimeObj.dateArr,
dateTimeObj.timeHHArr,
dateTimeObj.timeMMArr
],//二维数组,长度是多少是几列
dateTimeIndex: [0, 0, 0],
}
},
methods: {
dateTimeChange: function(e) {
const d = dateTimeObj.dateArr[e.detail.value[0]].value
const h = dateTimeObj.timeHHArr[e.detail.value[1]].value
const m = dateTimeObj.timeMMArr[e.detail.value[2]].value
this.travelDate = `${d} ${h}:${m}`
}
}
}
</script>
<style lang="scss" scoped>
</style>