uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件

目录

代码分享

utils文件

uniapp使用插件使用

zdp-date-picker使用说明

本组件用到了uni-ui的uni-popup弹窗组件

废话不多说直接上代码

代码分享

	
		
		
			
				
					取消
				
				
				
					
						请选择时间
						
							{{selInfo}}
						
					
				
				
					确认
				
			
			
				
					{{item.label}}
				
			
			
				
					
						{{item}}{{obj.value}}
						
					
				
			
		
		
	


	import {
		whichWeek
	} from '../../utils/getWeek.js'
	import {
		getMonthStartEnd
	} from '../../utils/getMonth.js'
	import {
		getQuarterDates
	} from '../../utils/getQuarter.js'
	export default {
		props: {
			type: {
				type: String,
				default: '日',
				validator(value, props) {
					return ['日', '月', '周', '年', '季'].includes(value)
				}
			},
			time: {
				type: String, //'2024-1-1' '2024-2' '2024-2' '2024-2' '2024
			}
		},
		data() {
			return {
				tabs: [{
						label: '日',
						value: '日'
					},
					{
						label: '周',
						value: '周',
					},
					{
						label: '月',
						value: '月',
					},
					{
						label: '季',
						value: '季',
					},
					{
						label: '年',
						value: '年',
					}
				],
				activeIdx: '日',
				value: [], //选择的值,要设置默认值
				dateArr: [],
				day: 18,
				week: 1,
				month: 1, //
				quarter: 2,
				years: 24,
				SelArr: [],
				range: '',
				zdpdate: ''
			}
		},
		computed: {
			selInfo() {
				let str = ''
				let {
					activeIdx,
					years,
					day,
					month,
					week,
					quarter
				} = this
				if (activeIdx == '日') {
					str = `20${years}年 ${month{scope.range}}
		{{scope.zdpdate}}