ProAdvanced/components/slambb-picker/slambb-picker-date.vue

<template>
	<view class="date-container ">
		<view class="date-view">
			<picker-view class="mpvue-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="picker-unit text-gray">年 月 日</view>
		<!-- <view class="picker-unit-center">年月日 </view> -->
	</view>
</template>

<script>
	var minDate = 1950;
	export default {

		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			// for (let i = 2040; i >= 1950; i--) {
			// 	years.push(i)
			// }
			// for (let i = 12; i > 0; i--) {
			// 	months.push(i)
			// }
			// for (let i = 31; i > 0; i--) {
			// 	days.push(i)
			// }

			for (let i = minDate; i <= date.getFullYear()+10; i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}

			return {

				// 年月日
				years,
				year,
				months,
				month,
				days,
				day,
				value: [year-minDate, month - 1, day - 1],
				// value: [2040 - year, 12 - (month - 1), 30 - (day - 1)],
				visible: true,
				indicatorStyle: `height: 65rpx; `
			}
		},
		mounted() {
			// console.log('显示时候更新一次数据');
			this.value=[this.year-minDate, this.month - 1, this.day - 1];
			this.$emit('bindChangeDate', [this.year, this.month, this.day]);
		},
		methods: {
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				
				//将选择的年月日变为number形式，便于比较之用
				var y = parseInt(this.year)
				var m = parseInt(this.month)
				var d = parseInt(this.day)

				//选择不同月份显示的天数不同
				if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
					if (this.days.length != 31) {
						this.days = []
						for (let i = 1; i <= 31; i++) {
							this.days.push(i)
						}
						// for (let i = 31; i > 0; i--) {
						// 	this.days.push(i)
						// }
					}
				} else if (m == 4 || m == 6 || m == 9 || m == 11) {
					if (this.days.length != 30) {
						this.days = []
						for (let i = 1; i <= 30; i++) {
							this.days.push(i)
						}
						// for (let i = 30; i > 0; i--) {
						// 	this.days.push(i)
						// }
					}
				} else if (m == 2) {
					if ((y % 4 == 0 && y % 100 != 0) || (y % 400 == 0)) { //闰年
						if (this.days.length != 29) {
							this.days = []
							for (let i = 1; i <= 29; i++) {
								this.days.push(i)
							}
							// for (let i = 29; i > 0; i--) {
							// 	this.days.push(i)
							// }
						}
					} else { //平年
						if (this.days.length != 28) {
							this.days = []
							for (let i = 1; i <= 28; i++) {
								this.days.push(i)
							}
							// for (let i = 28; i > 0; i--) {
							// 	this.days.push(i)
							// }
						}
					}
				}


				//处理选择今年的情况
				if (y == this.currentYear) {

					//最多显示到当前月份
					if (this.months.length != this.currentMonth) {
						this.months = []
						for (let i = 1; i <= this.currentMonth; i++) {
							this.months.push(i)
						}
						// for (let i = this.currentMonth; i > 0; i--) {
						// 	this.months.push(i)
						// }
					}

					//如果选择的是当前月份，那么日最多显示到今天
					if (m == this.currentMonth) {
						if (this.days.length != this.currentDay) {
							this.days = []
							for (let i = 1; i <= this.currentDay; i++) {
								this.days.push(i)
							}
							// for (let i = this.currentDay; i > 0; i--) {
							// 	this.days.push(i)
							// }
						}
					}

				} else {
					this.months = []
					for (let i = 1; i <= 12; i++) {
						this.months.push(i)
					}
					// for (let i = 12; i > 0; i--) {
					// 	this.months.push(i)
					// }
				}

				this.$emit('bindChangeDate', [this.year, this.month, this.day])
			},
		}
	}
</script>

<style>
	/* picker */
	.date-container {
		position: relative;
		display: flex;
		justify-content: center;
	}

	.date-view {
		background: #FFFFFF;
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: center;
		border-radius: 20upx;
	}

	.mpvue-picker-view {
		width: calc(80% - 200rpx);
		/* padding-top: 10px; */
		height: 300rpx;
		/* background-color: rgba(255, 85, 0, 1); */
		border-radius: 20px;
		/* display: flex; */
	}

	.item {
		text-align: center;
		width: calc(100% - 0px);
		/* background-color: rgba(255, 170, 127, 1); */
		height: 65rpx;
		line-height: 65rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 20px;
		color: rgba(164, 136, 220, 1);
		/* padding-right: 10upx; */
		/* border: 1rpx solid #007AFF; */
	}

	.picker-unit {
		position: absolute;
		left: 20px;
		top: 20px;
		font-size: 13px;
		line-height: 26px;
		z-index: 100;
	}

	.picker-unit-center {
		position: absolute;
		left: 90rpx;
		top: 120rpx;
		width: 100%;
		font-size: 13px;
		color: rgba(164, 136, 220, 1);
		line-height: 40px;
		z-index: 100;
		letter-spacing: 80rpx;
	}
</style>