uni-app 自带的picker封装一个日期-时间选择器

首先看下最终效果

设置数据

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>