partnerApp/pages/components/date-picker.vue

<template>
	<div>
		<u-popup ref="popup" class="popup" :mask="true" mode="bottom" border-radius="20">
			<view>
				<view class="popup-title ">
					<text>时间筛选</text>
					<text @click="$refs.popup.close()">×</text>
				</view>
				<view class="quickOptions dis f-c ">
					<text class="title">快捷选择</text>
					<view class=" dis a-c j-start">
						<view class="tab" :class="{tabactive:OptionsTabIndex==index}"
							v-for="(item,index) in quickOptions" :key="index" @click="OptionsTabSelect(index)">
							<text>{{item}}</text>
						</view>
					</view>
				</view>
				<text style="margin-left: 42rpx;font-size: 30rpx;color: #333;">自定义时间</text>
				<view style="padding:20rpx  42rpx">
					<view class="popup-data dis j-s">
						<text :class="startShow? 'active' :''"
							@click="startClick()">{{ interviewStartTime||'开始时间' }}</text>至
						<text :class="endShow? 'active' :''" @click="endClick()">{{ interviewEndTime || '结束时间' }}</text>
					</view>
					<picker-view v-show="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item dis a-c j-c " v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item dis a-c j-c " v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item dis a-c j-c " v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
			<view class="popup-footer dis j-s">
				<text @click.stop="reset">重置</text>
				<text @click.stop="confirm">确定</text>
			</view>
		</u-popup>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				quickOptions: ["今日", "本月", "本年"], //快捷选项
				OptionsTabIndex: null, //下标
				startShow: false,
				endShow: false,
				interviewStartTime: '',
				interviewEndTime: '',
				years: [],
				year: null,
				months: [],
				month: null,
				days: [],
				day: null,
				hours: [],
				hour: null,
				minutes: [],
				minute: null,
				value: [],
				indicatorStyle: `height: 50px;color:#2D6DFF `,
				visible: false
			}
		},
		props: {
			// visible: {
			//   type: Boolean,
			//   default: true
			// },

			// interviewTime: {
			//   type: String,
			//   default() {
			//     return '';
			//   },
			// }
		},
		mounted() {
			this.init();
		},
		watch: {
			// visible: {
			//   handler(newValue, oldValue) {
			//     if (newValue) {
			//       if (this.interviewTime) {
			//         this.init(this.interviewTime);
			//       }
			//     }
			//   },
			//   immediate: false,
			//   deep: true
			// }
		},
		methods: {
			//快捷选择
			OptionsTabSelect(index) {
				this.OptionsTabIndex = index;
			},
			open() {
				this.$refs.popup.open()
			},
			bindChange: function(e) {
				const val = e.detail.value
				let year = this.years[val[0]]
				let isDay = 30,
					days = [];
				if (val[1] + 1 == 2) {
					if ((val[0] % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
						console.log('闰年')
						isDay = 29;
					} else {
						isDay = 28;
						console.log('平年')
					}
				} else if ([1, 3, 5, 7, 8, 10, 12].includes(val[1] + 1)) {
					isDay = 31;
				} else {
					isDay = 30;
				}

				for (let i = 1; i <= isDay; i++) {
					days.push(i)
				}
				this.days = days;
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				if (this.startShow) {
					this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
				}
				if (this.endShow) {
					this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
				}
			},
			init() {
				const date = new Date();
				const years = []
				const year = date.getFullYear()
				const months = []
				const month = date.getMonth() + 1
				const days = []
				const day = date.getDate()

				let isDay = 30;
				if (month == 2) {
					if ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)) {
						isDay = 29;
					} else {
						isDay = 28;
					}
				} else if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
					isDay = 31;
				} else {
					isDay = 30;
				}

				for (let i = date.getFullYear(); i >= 1900; i--) {
					years.push(i)
				}
				for (let i = 1; i <= 12; i++) {
					months.push(i)
				}
				for (let i = 1; i <= isDay; i++) {
					days.push(i)
				}

				this.years = years
				this.year = year
				this.months = months
				this.month = month
				this.days = days
				this.day = day
				this.value = [0, month - 1, day - 1]
			},
			// 补0
			padZeroStr(originStr) {
				if (+originStr < 10) {
					return String(originStr).padStart(2, '0')
				}
				return originStr + ''
			},
			close() {
				this.$emit('update:visible', false);
			},
			reset() {
				this.$emit('update:visible', false);
				this.interviewStartTime = ''
				this.interviewEndTime = ''
			},
			startClick() {
				// this.interviewStartTime=''
				this.interviewStartTime = this.year + '-' + this.month + '-' + this.day
				this.visible = true
				this.startShow = true
				this.endShow = false
			},
			endClick() {
				this.interviewEndTime = this.year + '-' + this.month + '-' + this.day
				this.visible = true
				this.startShow = false
				this.endShow = true
			},
			confirm() {
				// let monthStr = this.padZeroStr(this.month)
				// let dayStr = this.padZeroStr(this.day)
				// let hourStr = this.padZeroStr(this.hour)
				// let minuteStr = this.padZeroStr(this.minute)
				// this.timeValue = `${this.year}/${monthStr}/${dayStr} ${hourStr}:${minuteStr}:00`;
				this.$emit('confirmPickDate', this.interviewStartTime, this.interviewEndTime);
				this.$refs.popup.close()
			},
		},
	}
</script>
<style lang="scss" scoped>
	.popup {
		border-radius: 10px 10px 0 0 !important;
	}

	.popup-title {
		font-size: 15px;
		color: #333333;
		padding: 10px;
		margin-bottom: 10px;
		position: relative;
		text-align: center;
		border-bottom: 1rpx solid #eee;

		text:first-child {
			font-weight: 600;
		}

		text:last-child {
			position: absolute;
			right: 10px;
			font-size: 21px;
			color: #999999;
			line-height: 23px;
		}
	}

	.quickOptions {
		padding: 0 42rpx;
		box-sizing: border-box;
		margin-bottom: 37rpx;

		.title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
		}

		.tab {
			padding: 7rpx 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			color: #666;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			border: 1rpx solid #EEEEEE;
			margin-right: 30rpx;
		}

		.tabactive {
			background: rgba(45, 109, 255, 0.1);
			color: #2D6DFF;
			border: 1rpx solid #fff;
		}
	}

	.popup-footer {
		margin: 10px 15px;

		text {
			font-size: 16px;
			padding: 5px 0;
			color: #FFFFFF;
			display: inline-block;
			width: 45%;
			text-align: center;
		}

		text:first-child {
			color: #2D6DFF;
			background: rgba(45, 109, 255, 0.1);
			border-radius: 5px 5px 5px 5px;
		}

		text:last-child {
			background: linear-gradient(132deg, #2DD9FF 0%, #2D6DFF 100%);
			border-radius: 5px 5px 5px 5px;
		}
	}

	.popup-data {
		line-height: 25px;

		text {
			font-size: 14px;
			color: #999999;
			display: inline-block;
			width: 45%;
			text-align: center;
			border: 1px solid #DDDDDD;
			border-radius: 2px 2px 2px 2px;
		}

		.active {
			border: 1px solid #2D6DFF;
			color: #2D6DFF;
		}
	}

	.picker-view {
		width: 100%;
		height: 150px;
	}
</style>