uniapp picker中的日期选择器和时间选择器demo效果（整理）

<template>
	<view>
		<view class="box_date" style="margin-top: 200rpx;">
			<view>
				<text>请选择日期：</text>
			</view>
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="changeDate">
				<view class="date">
					<input type="text" disabled="true" v-model="date">
				</view>
			</picker>
		</view>
	</view>
</template>
<script>
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;

		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				date: getDate(), //当前日期
				startDate: getDate('start'), //可选择的最小日期
				endDate: getDate('end'), //可选择的最大日期
			};
		},
		methods: {
			changeDate(e) {
				this.date = e.detail.value;
				console.log('选择的日期：', this.date)
			},
		}
	};
</script>
<style>
	.box_date {
		margin: 20upx;
		display: flex;
	}

	.date {
		border: 1px solid #ccc;
		padding: 10upx;
		width: 300upx;
	}

	.box_date text {
		line-height: 60upx;
	}
</style>

<template>
    <view>
      <view class="box_time">
            <view>
                <text>请选择时间：</text>
            </view>
            <picker mode="time" :value="time"  :start="minTime" :end="maxTime" @change="changeTime">
                <view class="time">
                    <input type="text" disabled="true" v-model="time">
                </view>
            </picker>
        </view>
    </view>
</template>
<script>
function getTime(){
        const time = new Date();
        let hour = time.getHours();
        let minute = time.getMinutes();
        
        hour = hour > 9 ? hour : '0' + hour;
        minute = minute > 9 ? minute : '0' + minute;
        
        return `${hour}:${minute}`;
    }
export default {
   data() {
            return {
                time: getTime(), //当前时间
                minTime: '09:00', //可选择的最小时间
                maxTime: '18:00' //可选择的最大时间
            };
        },
        methods: {
            changeTime(e) {
                this.time = e.detail.value
            }
        }
};
</script>
<style >
    .box_time{
        margin: 20upx;
        display: flex;
    }
    .time{
        border: 1px solid #ccc;
        padding: 10upx;
        width: 300upx;
    }
    .box_time text{
        line-height: 60upx;
    }
</style>

选择开始时间结束时间

<template>
	<view class="ditchIndex">
		<view class="margin-top100"></view>
		<!-- 中间内容开始 -->
		<view class="ditchMain">
			<view class="clientBox">
				<view class="clientTime">
					<view class="timeBox">
						<image src="../../static/img/icon_time.png" mode="widthFix" class="timeImg"></image>
						<view class="time1">
							<picker mode="date" :value="start_date" @change="bindDateChange">
								<view class="date">{{otherEnd}}</view>
							</picker>
						</view>
						<view class="txt">至</view>
						<view class="time2">
							<picker mode="date" :value="start_date" @change="bindDateChange2">
								<view class="date">{{other}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 中间内容结束 -->

	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				system: [],
				menu: [],
				// 计算头部距离结束
				start_date: currentDate,
				end_date: currentDate,
				other: '请输入',
				otherEnd: '请输入',
			}
		},
		onLoad() {

		},

		methods: {
			// 选择时间开始
			// 选择日期
			bindDateChange: function(e) {
				this.start_date = e.target.value
				this.otherEnd = this.start_date;

			},
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
				this.other = this.end_date;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 选择时间结束
		}
	}
</script>

<style lang="scss" scoped>
	.ditchIndex {

		.ditchMain {
			margin-right: 30rpx;
			margin-left: 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding-top: 30rpx;
			padding-bottom: 30rpx;

			.clientBox {
				margin-right: 30rpx;
				margin-left: 30rpx;

				.clientTime {
					.timeBox {
						display: flex;
						align-items: center;
						height: 60rpx;
						border: 1rpx solid #ECECEC;
						opacity: 1;
						border-radius: 10rpx;

						.timeImg {
							width: 30rpx !important;
							height: 30rpx !important;
							margin-left: 20rpx;

						}
					}
				}
			}
		}

	}
</style>