uniApp picker-view自定义选择时间

新建组件picker-date

通过uniapp提供的组件picker-view和picker-view-column做一个滚动的时间选择弹框

// An highlighted block
<template>
	<view class="">
		<!-- 支付按钮 -->
		<view class="pay_popup" :class="isOpen ? 'on' : ''">
			<view class="pay-title flex-sb-cent">
				<button class="btn" @click="onClose">取消</button>
				<button class="btn" @click="onSubmit">完成</button>
			</view>
			<view class="">
				<!-- <view class="uni-padding-wrap">
					<view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view>
				</view> -->
				<picker-view :value="value" @change="bindChange" class="picker-view" indicator-class="picker-box">
					<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 v-if="modelValue=='yyyy-MM-dd'">
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>

			</view>			
		</view>
		<view class="mask" v-if="isOpen" @click="onClose"></view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	export default {
		props: {
			isOpen: {
				default: false,
				type: Boolean
			},
			modelValue: {// 选择时间格式 yyyy-MM-dd
				default: '',
				type: String
			},
			isGreaterY: { // 是否选择年月日，y 表示选择年月日，n 表示选择年月
				default: 'n',
				type: String
			}
		},
		data () {
			
			return {
				title: 'picker-view',
				years: [],
				year: '',
				months: [],
				month: '',
				days: [],
				day: '',
				value: [],
				// indicatorStyle: `height: 50px;`
			}
		},
		created() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			if (this.isGreaterY=='n') {
				for (let i = 1990; i <= date.getFullYear(); i++) {
					years.push(i)
				}
				this.value = [9999,month-1,day-1]
			} else {
				for (let i = date.getFullYear()+100; i >= date.getFullYear(); i--) {
					years.unshift(i)
				}
				this.value = [0,month-1,day-1]
			}
			
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			// 设置默认选择时间
			this.years = years
			this.months = months
			this.days = days
			this.year = year
			
			this.day = day
			if (month<10) {
				this.month = '0'+month
			} else {
				this.month = month
			}
		},
		methods: {
			bindChange: function (e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				let month = this.months[val[1]]
				if (month<10) {
					this.month = '0'+month
				} else {
					this.month = month
				}
				this.day = this.days[val[2]]
			},
			onClose() {
				this.$emit('onClose',1)
			},
			onSubmit() {
				let data = ''
				if (this.modelValue=='yyyy-MM') {
					data = this.year+'.'+this.month
				} else {
					data = this.year+'.'+this.month+'.'+this.day
				}
				this.$emit('bindChage',data,{year:this.year,month:this.month,day:this.day})
			},
		}
	}
</script>

<style lang="less" scoped>
.pay_popup {
	.body-title {
		font-size: 36rpx;
		color: #666;
		text-align: center;
		padding-bottom: 12rpx;
		
	}
	.pay-title {
		border-bottom: none;
		padding: 0 32rpx;
		.btn {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #C90F07;
			line-height: 32rpx;
		}
	}
}
.picker-view {
	width: 100%;
	height: 432rpx;
	padding: 0 32rpx;
	.picker-box {
		// width: 686px;
		height: 80rpx;
		background: #C90F07;
		font-weight: 500;
		color: #45454C;
		line-height: 80rpx;
		opacity: 0.12;
	}
	uni-picker-view-column {
		&:first-child {
			.picker-box {
				border-top-left-radius: 16rpx;
				border-bottom-left-radius: 16rpx;
			}
		}
		&:last-child {
			.picker-box {
				border-top-right-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
			}
		}
	}
}
.item {
	height: 80rpx;
	line-height: 80rpx;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #45454C !important;
	font-size: 36rpx;
	font-family: PingFang SC;
}


</style>

在父组件中使用

引入父组件中

<template>
	<view>
		<view class="xss-info-item flex-fs-left">
			<view class="xss-left-name">有效期限</view>
			<view class="xss-input" @click="onTermOfValidity">
				<view class="xss-input-bar " v-if="expireTime">{{expireTime}}</view>
				<view class="xss-input-bar" style="color:#999;font-size:32rpx" v-else-if="!isCheched">请输入结束日期</view>
			</view>
			<view class="right-cheched flex-cent" @click="onChechedTime">
				<image class="right-img" v-if="isCheched" src="@/static/images/xs-cheched.png" mode=""></image>
				<image class="right-img" v-else src="@/static/images/xs-uncheched.png" mode=""></image>
				长期
			</view>
		</view>
		
		<pickerDate :isOpen="isOpenShow" @onClose="onCloseDate" modelValue="yyyy-MM-dd" isGreaterY="y" @bindChage="onBindChage"></pickerDate>
	</view>
</template>
<script>
	import pickerDate from "@/components/picker-date.vue"
	export default {
		components: {
			pickerDate,
		},
		data() {
			return: {
				isOpenShow: false, //打开时间选择
				isCheched: false,
				expireTime: '',
			}
		},
		methods: {
			// 筛选时间
			onTermOfValidity(e) {
				if (this.authState) return
				this.isOpenShow = true
			},
			onCloseDate(e) {
				this.expireTime = ''
				this.isOpenShow = false
			},
			onBindChage(e,data) {
				this.expireTime = data.year+'-'+data.month+'-'+data.day
				this.isOpenShow = false
			},
		}
	}
</script>