uniapp封装时间日期选择器

<template>
	<view class="view_app">
		<view class="selectMenu">
			<u-subsection :list="MenuList" mode="subsection" :current="MenuCurrent" activeColor="#f56c6c"
				@change="menuChange"></u-subsection>
		</view>
		<view class="content_app">
			<!-- 图片内容 -->
			<view class="image_content" v-if="MenuCurrent === 0">
				<!-- 时间选择周期 -->
				<view class="selectTime">
					<view class="startTime" @click="startShow = true">
						<view class="searchInput">
							{{timeString}}
						</view>
						<u-datetime-picker :show="startShow" title="请选择开始时间" v-model="startTime"
							:minDate="1587524800000" :maxDate="maxDate" mode="datetime" :formatter="formatter"
							@confirm="startTimeMethod"></u-datetime-picker>
						<u-datetime-picker :show="endShow" title="请选择结束时间" v-model="endTime"
							:minDate="endMinDate" :maxDate="endTime" mode="datetime" :formatter="formatter"
							@confirm="endTimeMethod"></u-datetime-picker>
						<!-- <u-calendar :show="calendarShow" rowHeight="80" @close="calendarShow = false" :mode="mode" @confirm="timeSelectConfirm" :minDate="minDate" :maxDate="maxDate"></u-calendar> -->
					</view>
					<view class="searchBtn">
						<view class="btn">
							<u-icon name="search"></u-icon>   搜索
						</view>
					</view>
				</view>
			</view>
			<!-- 视频内容 -->
			<view class="video_content" v-else>
				
			</view>
		</view>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		data() {
			return {
				MenuCurrent: 0,
				MenuList: ['图片', '视频'],
				imageSelectList: [],
				videoTotal: 0,
				videoList: [],
				timeString:'请选择查询时间',
				// 开始时间
				startShow: false,
				startTime: Number(new Date()),
				// 结束时间
				endShow:false,
				endMinDate:1587524800000,
				endTime: Number(new Date()),
				mode: 'range',
				minDate: `${year}-${month - 1}-${date}`,
				maxDate: Number(new Date()),
				
			}
		},
		onLoad() {
			this.getVideoPlay()
		},
		methods: {
			// 格式化时间日期
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			// 开始时间
			startTimeMethod(val) {
				this.endMinDate = val.value
				this.startTime = val.value
				// console.log(this.startTime);
				this.startShow = false
				this.endShow = true
			},
			// 结束时间
			endTimeMethod(val){
				this.endTime = uni.$u.timeFormat(val.value, 'yyyy-mm-dd hh:MM:') + '00'
				console.log(this.endTime);
				
				this.timeString =  uni.$u.timeFormat(this.startTime, 'yyyy-mm-dd hh:MM:') + '00' + ' ~ ' + this.endTime
				this.endShow = false
			},
			
			// 只播放当前视频其他视频暂停
			playOther(item, index, index2) {
				this.videoList.forEach((itemEl, ind) => {
					if (itemEl.id === item.id) {
						for (let j = 0; j < itemEl.video_list.length; j++) {
							if (item.video_list[index2].full_url === itemEl.video_list[j].full_url) {
								// console.log('这儿是正在播放的视频',item.video_list[index2].full_url,j);
							} else {
								let videoId = 'myVideo' + index + j
								uni.createVideoContext(videoId).pause()
							}
						}
					} else {
						for (let i = 0; i < itemEl.video_list.length; i++) {
							let videoId = 'myVideo' + ind + i
							uni.createVideoContext(videoId).pause()
						}
					}
				});
			},
			// 时间段选择
			timeSelectConfirm(e) {
				console.log(e);
			},
			menuChange(index) {
				this.MenuCurrent = index
			},
		}
	}
</script>

<style scoped lang="scss">
	.view_app {
		width: 100%;
		height: 100vh;
		padding: 10rpx;
		box-sizing: border-box;

		.selectMenu {
			width: 100%;
			height: 80rpx;
		}

		.content_app {
			width: 100%;
			height: calc(100vh - 100rpx);
			overflow: auto;
			padding-bottom: 20rpx;
			box-sizing: border-box;

			.image_content {
				width: 100%;
				height: 100%;

				.selectTime {
					width: 100%;
					height: 60rpx;
					display: flex;

					.startTime {
						width: 75%;
						height: 100%;
						.searchInput{
							width: 100%;
							height: 100%;
							border: 1rpx solid #e5e5e5;
							border-radius: 40rpx;
							padding: 0 15rpx;
							box-sizing: border-box;
							font-size: 26rpx;
							display: flex;
							color: #b8b8b8;
							// justify-content: center;
							align-items: center;
							white-space: nowrap;
							overflow-x: auto;
						}
					}
					.searchBtn{
						width: 25%;
						height: 100%;
						display: flex;
						justify-content: center;
						.btn{
							width: 150rpx;
							height: 100%;
							background-color: antiquewhite;
							border-radius: 30rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 26rpx;
						}
					}
				}
			}


			.video_content {
				width: 100%;
				height: 100%;


				.videoOne {
					width: 100%;
					// min-height: 350rpx;
					background-color: #f2f2f2;
					border-radius: 15rpx;
					margin-bottom: 20rpx;
					// padding: 10rpx;
					box-sizing: border-box;
					overflow: hidden;

					.videoTitle {
						width: 100%;
						height: 60rpx;
						color: #fff;
						background-color: rgb(245, 108, 108);
						line-height: 60rpx;
						padding: 0 10rpx;
						font-size: 26rpx;
						// display:;
					}

					.videoPlay {
						width: 100%;
						min-height: 290rpx;

					}
				}
			}


		}
	}
</style>