uniapp - 实现日期选择器（年月日）组件，兼容 H5、App、小程序，提供组件源码可直接复制运行！

已于 2024-07-29 11:41:05 修改
阅读量5.2k 收藏 4
点赞数 3
分类专栏： 前端组件与功能(开箱即用) 文章标签： uni-app uniapp日期选择器 uniapp年月日选择功能 uniapp兼容h5 app uniapp兼容小程序日期选择
于 2023-03-27 17:14:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/129799105
版权

效果图

该日期选择器组件无任何第三方依赖，源代码注释详细，高效简洁无 BUG。

本文详细讲解了在uniapp中，如何实现一个兼容h5、app、小程序的日期选择器组件，

你可以直接复制源码，然后再改改颜色什么的项目就能直接用了。

如下图所示，你将获取这样一个日期选择功能的组件。

在这里插入图片描述

实现源码

文件位置无所谓，但你最后要确保正确引入。

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
uniapp - 详细实现日期时间、范围选择器组件，点击底部弹出日期、时间、某个范围的选择器弹框（日期选择组件 单日/日期范围，uniapp自定义选择日、周、月、季、年的时间选择器详细示例源代码）
王佳斌
05-10 1万+
uniapp，微信小程序，h5网页网站，安卓苹果app，日期时间选择器，日历两个范围选择，日期选择器，时间选择器，年月日选择，小时分钟选择，uniapp日期时间及范围选择器，uniapp时间选择器_uniapp时间范围选择器，uniapp、小程序自定义选择日、周、月、季、年的时间选择器，uniapp的picker日期选择器使用及获取当天日期(时间)，uniapp开发微信小程序之时间选择器，uniapp中picker-view 封装时,分,秒选择组件，日期选择器picker(uni-app)，uniapp的
uniapp日期区间选择器
羽筠的博客
05-07 1152
uniapp日期区间选择器 在 uniapp 中创建一个简单的自定义日期范围的日期区间选择器： - 限制有效日期范围开始日期为 2024-01-01，结束日期为当日； - 默认日期区间为当日向前计算的7日区间； - 选择开始时间后，判断不可大于结束时间，且重置开始时间为结束时间； - 选择结束时间后，判断不可小于开始时间，且重置结束时间为开始时间； 示例代码： html： CSS： data设置参数数据： created 或 onLoad 中，调用请求接口获取筛选项数据方法： methods 处理方法：
【uniapp】开始时间，结束时间 picker 年月日时分 封装
weixin_71045874的博客
12-22 1906
uniapp 开始时间，结束时间 picker 年月日时分 封装
基于uni-app的 年-月-日 时 时间日期范围控件
wangweiruning的博客
06-03 1345
一个使用 uni-app 开发的日期时间选择器组件，它包含了一个遮罩层（pickerMask）和一个日期时间选择器弹窗（picker-box这个组件允许用户选择一个时间范围，包括年、月、日和小时。
uniapp [全端兼容] - 详细实现日期时间 “范围“ 弹框选择器功能，底部弹窗式选择日期范围组件（开始日期和结束日期，选择2个年月日），支持自定义返回数据格式、限制最大最小日期等（详细示例代码）
王佳斌
05-04 4198
uni-app，微信小程序，支付宝小程序，安卓app，苹果ios，nvue，H5网页网站，日期时间选择器，范围选择，日期时间范围选取，uniApp日期范围选择插件，弹框式范围选取，日历时间范围，选择两个日期时间，uniapp选择开始和结束日期，年月日，月份，年份，Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围，picker日期选择器和时间选择器的用法，日期选择器，uniApp微信小程序日期时间段选择(精确到年月日时分)，时间段选择限制(开始日期 结束日期相互限制)，日期选择组件 单日/日期
基于uniapp的时间选择器组件，特色：轻量级，可配置任意列的展示
Ang_pmj的博客
01-28 802
xp-picker 上一代e-picker-plus的优化版本，适配任何可选列的配置，包括但不限于’y-m-d h:i’、'm-d’等，详情请看文档 功能强、通用性强、多端兼容。兼容h5、微信小程序(其他平台小程序未作测试)与app 一、使用示例 示例1：函数式打开picker，通过 this.$refs[ref].show() <template> <view> <xp-picker ref="picker" @confirm="conf
百信药房小程序开发源码案例（H5+APP+小程序可部署）
jie15528175269的博客
05-28 614
商品重量（可选择单位）、商品拓展计算（可选择单位）、商品库存数量（库存在商品为虚货或商品存在货品时为不可编辑状态，库存数值取决于其虚货数量或货品数量）、库存警告数量、上架（打勾表示允许销售，否则不允许销售）、商品关键词、商品简单描述、商家备注（仅供商家自己看的信息）搜索：订单号、下单时间、收货人、电话号码、收货地址、总金额、应付金额、订单状态（可修改）、配送方式、操作（查看、移除）列表编号：编号、商品名称、货号、价格、上架（是否）、排序、库存、操作（查看详情、编辑、回收站）
使用uniapp编写微信小程序
weixin_43637720的博客
06-28 1230
使用uniapp开发微信小程序基本流程
jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件
weixin_43992507的博客
05-06 1547
jQuery移动端日期组件，H5移动端日期组件，MUI移动端日期组件，移动端简单的日期组件
mx-date-picker Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）
热门推荐
wwf1225的博客
09-29 1万+
Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围） 日期时间选择器 DatePicker 介绍 一款高颜值、多场景的日期时间选择器，提供自定义颜色/格式/文案等。 该插件采用scss编译，如遇到样式/层级问题可以到源码修改。 如果对您有帮助，可以评论或赞赏一下，谢谢！ 地址：Uni-App插件市场地址|Gitee|Github 属性说明 ...
微信小程序日期年月日范围选择的组件
01-18
适用于微信小程序的组件，主要是选择年月日的范围，可通过箭头选择上一年下一年，上一月下一月。并进行了日期校验，若开始日期晚于结束日期，则回自动切换开始日期为结束日期，同时，结束日期变为开始日期。 可以...
微信小程序 -- 年月日时分秒 picker 选择器
06-28
微信小程序的`picker`组件提供了强大的选择功能，通过封装年月日时分秒`picker`，我们可以为用户提供更加便捷的时间选择体验。通过合理的数据绑定、事件处理和样式设计，我们可以定制出符合应用风格的组件，并在整个...
微信小程序酒店选择区间日历组件版（可通过参数实现是否显示农历日期）
04-19
)微信小程序酒店选择区间日历组件版，可通过参数实现是否显示农历日期。 博客：https://blog.csdn.net/qq_40591925/article/details/84834692 ( ios显示问题解决： 将：var startWeek = new Date('' + year + '...
年月日时分秒选择器.zip
04-28
综上所述，利用uniapp的picker组件实现年月日时分秒选择器是一个结合了数据绑定、事件处理、组件定制和响应式设计的过程。通过掌握这些知识点，开发者可以构建出满足多样化需求的时间选择器，提高应用的用户体验和...
自制vue小组件——日历式日期选择器
08-16
萌新制作的日历式日期选择器,会标示现实日期，能够选择开始日期和结束日期 vue组件引入方式引入。 <date-picker ref="mydatepicker" date="2019/8/16" maxyear="2080" minyear="1998" absolute;bottom: 0;left:0;">...
uni-app声生命周期
最新发布
蚂蚁搬家
07-25 446
tabbar的页面展示过一次后就保留在内存中，再次切换tabbar页面，只会触发每个页面的onShow，不会再触发onLoad.onLoad:监听页面加载，其参数为上个页面传递的数据，参数类型为Object，只加载一次。onShow:监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面。onLaunch:当uni-app初始化完成时触发（全局触发一次）onShow:当uni-app启动，或从后台进入前台时显示。onReady:监听页面初次渲染完成，只加载一次。
2024最新Uniapp的H5网页版添加谷歌授权验证
松之宅
07-24 561
现在教程不少，但是自从谷歌升级验证之后，以前的老教程就失效了，现在写一个新教程以备不时之需。clientID的申请方式我就不再进行赘述了，其他的教程上面都有，我这边只提供最重要的东西。由于众所周知的特殊原因，开发的时候一定注意网络环境，如果没有梯子是无法进行开发的哦~1、要在html文件中导入谷歌的js文件。你需要将他放到你代码中合适的位置。5、以下代码放到onReady中。3、复制以下代码放在合适的位置。2、将html设置为模板。4、调用谷歌验证的代码。注意：没有梯子不显示。
uniapp+vue微信小程序项目中实现手机号授权登录
郭宝的博客
07-22 535
一般拿到code、encryptedData、iv数据以后，会将该数据传给后台，后台验证后会返回当前用户信息。
vue3实现一个竖着滑动年月日的日期选择器组件
05-31
好的，这是一个比较复杂的组件，需要考虑多种情况，下面我尝试给出一个简单的实现思路。 首先，我们需要一个容器来放置整个日期选择器，可以用 `div` 元素实现。然后，我们需要一个表头来显示年月，可以用 `div` 元素实现。接着，我们需要一个表格来显示日期，可以用 `table` 元素实现。 在表头中，我们需要显示当前选择的年月，并提供向前和向后翻页的按钮，可以用 `button` 元素实现。在表格中，我们需要显示一整个月的日期，可以用 `td` 元素实现。为了方便处理，我们可以把表格拆分成多个行，每行显示一周的日期。 接下来，我们需要实现滑动功能。可以使用 Vue3 提供的 `@touchstart`、`@touchmove`、`@touchend` 事件，在事件处理函数中计算手指的滑动距离，然后根据距离计算应该滚动到哪个位置。具体实现可以参考如下代码： ```html <template> <div class="date-picker" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <div class="header"> <button class="prev" @click="goPrev"><</button> <div class="title">{{ title }}</div> <button class="next" @click="goNext">></button> </div> <table class="dates"> <thead> <tr> <th v-for="(day, index) in days" :key="index">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeks" :key="index"> <td v-for="(date, index) in week" :key="index" :class="{ active: isActive(date) }" @click="select(date)">{{ date }}</td> </tr> </tbody> </table> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const days = ['日', '一', '二', '三', '四', '五', '六']; const weeks = ref([]); const title = ref(''); const currentDate = ref(new Date()); const startDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1)); const endDate = ref(new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 0)); const startY = ref(0); const endY = ref(0); const init = () => { title.value = `${currentDate.value.getFullYear()}年${currentDate.value.getMonth() + 1}月`; const firstDay = startDate.value.getDay(); const lastDate = endDate.value.getDate(); const prevMonthEndDate = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 0).getDate(); const prevMonthDates = prevMonthEndDate - firstDay + 1; const nextMonthDates = 42 - lastDate - firstDay; const dates = []; for (let i = prevMonthDates; i <= prevMonthEndDate; i++) { dates.push(i); } for (let i = 1; i <= lastDate; i++) { dates.push(i); } for (let i = 1; i <= nextMonthDates; i++) { dates.push(i); } for (let i = 0; i < 6; i++) { weeks.value[i] = dates.slice(i * 7, (i + 1) * 7); } }; const goPrev = () => { currentDate.value.setMonth(currentDate.value.getMonth() - 1); startDate.value.setMonth(startDate.value.getMonth() - 1); endDate.value.setMonth(endDate.value.getMonth() - 1); init(); }; const goNext = () => { currentDate.value.setMonth(currentDate.value.getMonth() + 1); startDate.value.setMonth(startDate.value.getMonth() + 1); endDate.value.setMonth(endDate.value.getMonth() + 1); init(); }; const isActive = (date) => { return date === currentDate.value.getDate(); }; const select = (date) => { currentDate.value.setDate(date); init(); }; const onTouchStart = (e) => { startY.value = e.touches[0].pageY; }; const onTouchMove = (e) => { endY.value = e.touches[0].pageY; const delta = endY.value - startY.value; if (Math.abs(delta) >= 50) { if (delta > 0) { goPrev(); } else { goNext(); } startY.value = endY.value; } }; const onTouchEnd = () => { startY.value = 0; endY.value = 0; }; init(); return { days, weeks, title, goPrev, goNext, isActive, select, onTouchStart, onTouchMove, onTouchEnd, }; }, }; </script> <style scoped> .date-picker { width: 100%; height: 200px; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; font-size: 16px; font-weight: bold; background-color: #f5f5f5; } .title { flex-grow: 1; text-align: center; } .dates { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: center; } .active { background-color: #409eff; color: #fff; } .prev, .next { border: none; background-color: transparent; font-size: 16px; cursor: pointer; } .prev:hover, .next:hover { color: #409eff; } </style> ``` 这段代码实现了一个简单的竖着滑动年月日的日期选择器组件，使用了 Vue3 的 Composition API，使用了 `ref` 和 `setup` 函数。具体实现过程中，我们使用了一些计算属性和事件处理函数，实现了日期的显示和滑动功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值