uniapp 自定义日期选择器

最新推荐文章于 2025-02-21 11:36:44 发布

倔子

最新推荐文章于 2025-02-21 11:36:44 发布

阅读量1k

点赞数

分类专栏：【uniapp】 vue

本文链接：https://blog.youkuaiyun.com/qq_36003998/article/details/119732099

版权

本文介绍如何在uniapp中创建自定义的日期选择器组件，通过深度封装原生日期选择器，实现个性化样式和功能，包括多选日期、日期范围限制、自定义显示格式等，帮助开发者提升用户体验。

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

<template>
<view class="pick-component" :class="{active: show}">
	<view class="conver-bg" />
	<view class="footer-modal">
		<view class="z-flex">
			<text @click="handleCancel">取消</text>
			<text @click="handleSure" class="sure-txt">确定</text>
		</view>
		<picker-view class="picker-view-main" :indicator-style="indicatorStyle" 
			:value="sureValue"
			@change="handleValueChange"
		>
			<picker-view-column>
				<view class="item" v-for="(item,index) in dateList" :key="index">{
  {item.text}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item,index) in showHoursList" :key="index">{
  {item}}{
  {sur