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

置顶

张大炮er

已于 2024-07-03 16:23:17 修改

阅读量8.1k

点赞数 16

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app 小程序

于 2024-01-23 17:48:18 首次发布

本文链接：https://blog.csdn.net/zh626678/article/details/135777588

该博客主要进行代码分享，介绍了uni-app使用zdp-date-picker插件的相关内容。此组件用到了uni-ui的uni-popup弹窗组件，还详细说明了zdp-date-picker的属性参数、事件返回参数以及自定义插槽等使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

废话不多说直接上代码

代码分享

<template>
	<view class="content-pop">
		<!-- <uni-popup ref="popup" type="bottom"> -->
		<view class="pop-cont" :class="showCont?'open':''">
			<view class="zdp-pop">
				<view class="top-cont">
					<view class="close-cont" @click="close(1)">
						取消
					</view>
					<!-- 可以自定义显示 -->
					<slot name="text" :scope="{range,zdpdate}">
						<view class="text-info">
							请选择时间
							<view>
								{
  
  {selInfo}}
							</view>
						</view>
					</slot>

					<view class="save-cont" @click="close(2)">
						确认
					</view>
				</view>
				<view class="tabs-cont">
					<view class="tab-list" v-for="item in tabs" :class="item.value==activeIdx?'active':''"
						@click="handleTabs(item.value)">
						{
  
  {item.label}}
					</view>
				</view>
				<view class="date-cont">
					<picker-view :value="value" @change="handleChange" class="picker-view">
						<picker-view-column v-for="obj in SelArr">
							<view class="item" v-for="(item,index) in obj.child" :key="index">
								{
  
  {item<10?'0'+item:item}}{
  
  {obj.value}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>

		<!-- </uni-popup> -->
	</view>
</template>

<script>
	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 {
				showCont: false,
				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<10?'0'+month:month}月 ${day<10?'0'+day:day}日`
				} else if (activeIdx == '周') {
					str = `20${years}年 第${week}周`
				} else if (activeIdx == '月') {
					str = `20${years}年 ${month<10?'0'+month:month}月`
				} else if (activeIdx == '季') {
					str = `20${years}年 ${quarter}季`
				} else if (activeIdx == '年') {
					str = `20${years}年`
				}
				return str
			}
		},
		created() {

		},
		methods: {
			// 
			handleProps() {
				let arr = []
				arr = this.time.split('-')
				if (this.type == '日') {
					this.month = arr[1] - 0
					this.day = arr[2] - 0
				} else if (this.type == '周') {
					this.week = arr[1] - 0
				} else if (this.type == '季') {
					this.quarter = arr[1] - 0
				} else if (this.type == '月') {
					this.m