uni-app日期范围选择，颗粒度为`年-月`，支持`至今`选项

Posted 2022-12-14 st646889325

 

1. 在components中创建sofar-picker.vue

<template>
	<view :class="'pickerMask':visable" @click="maskClick" @touchmove.stop.prevent="returnHandle">
		<view class="picker-box" :class="'picker-show':visable">
			<view class="operate-box" @touchmove.stop.prevent="returnHandle" @tap.stop="returnHandle">
				<view class="time-box">
					<view @click="touchSelect(0)" class="time-item" :style="color:touchIndex?'#000000':themeColor">
						<text>startText</text>
						<text>resultDate[0]</text>
					</view>
					<text>至</text>
					<view @click="touchSelect(1)" class="time-item" :style="color:touchIndex?themeColor:'#000000'">
						<text>endText</text>
						<text>resultDate[1]</text>
					</view>
				</view>
				<view :style="color:themeColor" @click="pickerConfirm">确定</view>
			</view>
			<picker-view :value="pickerValue" @change="pickerChange" class="picker-view" :indicator-style="indicatorStyle" @tap.stop="returnHandle">
				<picker-view-column>
					<view class="picker-item" v-for="(item,index) in yearList" :key="index">index>0||touchIndex<1? item+'年' : item+'年' </view>
				</picker-view-column>
				<picker-view-column>
					<view class="picker-item" v-for="(item,index) in monthList" :key="index">
						<text v-show="pickerValue[0]>0||touchIndex<1">item月</text>
					</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default 
		name: 'sofarPicker',
		props: 
			defaultDate: 
				type: Array,
				default: () => []
			,
			visable: 
				type: Boolean,
				default: false
			,
		    minYear: 
				type: Number,
				default: 1990,
			,
			separator: 
				type: String,
				default: '.'
			,
			themeColor:
				type: String,
				default: '#10BE9D'
			,
			startText: 
				type: String,
				default: '开始时间'
			,
			endText: 
				type: String,
				default: '结束时间'
			
		,
		data() 
		    const date = new Date();
		    const yearList = [];
		    const year = date.getFullYear();
		    const monthList = [];
		    const month = date.getMonth() + 1;
		    for (let i = this.minYear; i <= date.getFullYear(); i++) 
		        yearList.unshift(i);
		    
		    for (let i = 1; i <= 12; i++) 
		        monthList.push(i);
		    
		    return 
				indicatorStyle: 'height: 100rpx;',
				touchIndex: 0,
				yearList: yearList,
				monthList: monthList,
				year: year,
				month: month,
				pickerValue: [0, month - 1],
				resultDate: []
		    
		,
		mounted() 
			this.setDate()
		,
		methods: 
			returnHandle(),
			maskClick() 
				this.$emit('update:visable', false)
			,
			setDate() 
				if (this.defaultDate.length > 0) 
					let date = this.defaultDate[0]
					this.resultDate = this.defaultDate
					this.setPicker(date)
				 else 
					let startTime = this.year + this.separator + this.month
					this.resultDate = [startTime, '至今']
				
			,
			setPicker(date) 
                console.log('setPicker');
				console.log(date);
				let startTime = this.year + this.separator + this.month
				if (date === '至今') 
					this.pickerValue = [0, 0]
				 else 
					let dateArray = date.split(this.separator)
					let yearIndex = this.yearList.indexOf(Number(dateArray[0]))
					let monthIndex = this.monthList.indexOf(Number(dateArray[1]))
					this.pickerValue = [yearIndex, monthIndex]
					
			,
			getDate(date) 
				let result = ''
				let year = this.yearList[date[0]]
				let month = this.monthList[date[1]]
				if (year === '至今') 
					result = '至今'
				 else 
					result = year + this.separator + month
				
				
				this.resultDate[this.touchIndex] = result
			,
			touchSelect(val) 
				console.log('touchSelect');
				let date = this.resultDate[val]
				if (this.touchIndex === val) 
					return
				 else 
					if (val) 
						this.yearList.unshift('至今')
					 else 
						this.yearList.splice(0, 1)
					
					
					this.touchIndex = val
				
				if (date) 
					this.setPicker(date)
				
			,
			pickerChange(e) 
				this.pickerValue = e.detail.value
				this.getDate(e.detail.value)
			,
			pickerConfirm() 
				const  resultDate, year, month  = this
				let nowTime = new Date(year+'/'+month).getTime()
				let startTime = new Date(resultDate[0]).getTime()
				let endTime = resultDate[1] === '至今' ? nowTime : new Date(resultDate[1]).getTime()
				if (startTime <= endTime && endTime <= nowTime) 
					this.$emit('confirm', resultDate)
					this.maskClick()
				 else 
					uni.showToast(
						title: '时间范围错误！',
						icon: 'none'
					)
				
			
		
	
</script>

<style lang="scss" scoped>
	.pickerMask 
	    position: fixed;
	    z-index: 998;
	    top: 0;
	    right: 0;
	    left: 0;
	    bottom: 0;
	    background: rgba(0, 0, 0, 0.6);
	
	.picker-box 
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    transition: all 0.3s ease;
	    transform: translateY(100%);
	    z-index: 998;
		.operate-box 
		    display: flex;
			align-items: center;
			justify-content: space-between;
		    padding: 18rpx 30rpx;
		    background-color: #FFFFFF;
		    text-align: center;
		    font-size: 30rpx;
			border-bottom: 2rpx solid #e5e5e5;
			.time-box 
				width: 60%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.time-item 
					display: flex;
					flex-direction: column;
				
			
		
	
	.picker-show 
	    transform: translateY(0);
	
	.picker-view 
		width: 750rpx;
		height: 600rpx;
		background-color: #FFFFFF;
		.picker-item 
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		
	
</style>

2. 使用

<template>
	<view class="content">
		<view class="header">
			<view class="date-item">年月范围：startTime - endTime</view>
		</view>
		<button class="date-btn" type="default" @click="openPicker">打开</button>
		<sofar-picker :visable.sync="pickerVisable" :defaultDate="defaultDate" @confirm="confirm"></sofar-picker>
	</view>
</template>

<script>
	import sofarPicker from '@/components/sofar-picker/sofar-picker.vue'
	export default 
		components: 
			sofarPicker
		,
		data() 
			return 
				pickerVisable: false,
				defaultDate: [],
				startTime: '',
				endTime: ''
			
		,
		methods: 
			openPicker() 
				this.pickerVisable = true
			,
			confirm(date) 
				this.startTime = date[0]
				this.endTime = date[1]
			
		
	
</script>

<style>
	.header 
		width: 100%;
		padding: 60rpx 30rpx;
		display: flex;
		flex-direction: column;
	
	.date-item 
		margin-bottom: 30rpx;
	
	.date-btn 
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
	
</style>