效果圖：

需要引入moment.js，有可能引入后在項目內(nèi)會報錯，可以考慮把選擇日期作為一個組件引入

1、timepage.vue組件封裝

<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('YYYY年MM月DD日 HH:mm')}}</text>
			</view>
		</picker>
	</view>
</template>

<script>
	import moment from '../../utils/moment.js'
	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('YYYY年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: {},
		props:{
			travelDate:{
				type:String,
				default: ''
			},
			dateTimeIndex:{
				type: Array,
				default: function () {
					return [0, 0, 0]
				}
			}
		},
		data() {
			return {
				moment: moment,
				dateTimeArray: [
					dateTimeObj.dateArr,
					dateTimeObj.timeHHArr,
					dateTimeObj.timeMMArr
				], //二維數(shù)組，長度是多少是幾列
				// dateTimeIndex: [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.$emit("timeSelect", `${d} ${h}:${m}`,e.detail.value);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.items{
		margin-bottom: 18rpx;
	}
	.items-text{
		font-size: 30rpx;
		line-height: 40rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 19rpx;
	}
	.select-input{
		width:100%;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 10rpx;
		border: 1rpx solid #BDBDBD;
		padding-left: 22rpx;
		box-sizing:border-box;
	}
	.time-select{
		display: flex;
		justify-content: space-evenly;
		padding-left: 0;
		font-size:30rpx;
	}
</style>

2、官網(wǎng)下載moment.js 下載地址
3、需要顯示時間組件的頁面內(nèi)引用時間組件文章來源地址http://www.zghlxwxcb.cn/news/detail-629927.html

<template>
	<view class="items">
		<view class="items-text">請選擇時間段 (必填)</view>
		<view class="select-input time-select">
			<time-page @timeSelect="timeSelectStart" :dateTimeIndex="startDateTimeIndex" :travelDate="startClearingTime"></time-page>至
			<time-page @timeSelect="timeSelectEnd" :dateTimeIndex="endDateTimeIndex" :travelDate="endClearingTime"></time-page>
		</view>
	</view>
	<button class="btn-item " @click="toSubmit">提交</button>
</template>

<script>
	import timePage from '@/components/timepage/timepage.vue';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				startTimeNow: currentDate,//當前時間
				startClearingTime: '', //開始時間
				startDateTimeIndex:[0,0,0],//開始時間默認選擇
				endClearingTime: '', //結(jié)束時間
				endDateTimeIndex:[0,0,0],//結(jié)束時間默認選擇
			}
		},
		components: {
			timePage
		},
		methods: {
			// 當前時間
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hour = date.getHours();
				let minute = date.getMinutes();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				hour = hour > 9 ? hour : '0' + hour;
				minute = minute > 9 ? minute : '0' + minute;
				return `${year}-${month}-${day} ${hour}:${minute}`;
			},
			// 提交
			toSubmit: function() {
				//以下為判斷條件：非空判斷、開始時間不得晚于結(jié)束時間、開始時間不得早于當前時間
				if (this.startClearingTime.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "請選擇開始時間",
					})
					return
				}
				
				if (this.startClearingTime < this.startTimeNow) {
					uni.showToast({
						icon: 'none',
						title: "請在當前時間后選擇時間段",
					})
					return
				}
				if (this.endClearingTime.length == 0) {
					uni.showToast({
						icon: 'none',
						title: "請選擇結(jié)束時間",
					})
					return
				}
				if (this.startClearingTime > this.endClearingTime) {
					uni.showToast({
						icon: 'none',
						title: "開始時間不得晚于結(jié)束時間",
					})
					return
				}
			}
		}
	}

到了這里，關(guān)于uniapp 小程序 picker 日期時間段選擇（精確到年月日時分+周幾）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！