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>