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
版权
本文介绍了一个无第三方依赖的uniapp日期选择器组件，兼容H5、App和小程序。组件源码详细注释，易于理解和使用，可以直接复制到项目中进行颜色等定制。
摘要由CSDN通过智能技术生成

效果图

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

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

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

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

在这里插入图片描述

实现源码

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

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
微信小程序 -- 年月日时分秒 picker 选择器
06-28
微信小程序 -- 年月日时分秒 picker 选择器 基于微信小程序封装 月日时分秒 picker 选择器 封装插件 全局引用
Uniapp日期时间选择插件支持更多选择方式日期范围日期时间范围
08-10
Uni-app日期时间选择插件，支持更多选择方式（日期范围，日期时间范围）
uniapp纯js手写日历筛选年，月，日，季度，周
最新发布
记录做程序员自己遇到的每一个难点
07-18 1018
else if (this.frequency == '1') { // 月频。} else if (this.frequency == '3') { // 年频。} else if (this.frequency == '1') { // 月频。} else if (this.frequency == '3') { // 年频。} else if (this.frequency == '1') { // 月频。} else if (this.frequency == '3') { // 年频。
uniapp实现时间选择器
qq_21861771的博客
11-14 1895
在<uni-datetine-picker>标签时 confm 事件监听用户洗择的时间。在事件外理都中，可以获到用户洗择的时间对象，并进行相应操作。具体的配置选项可以查阅Uniapp官方文档中uni-datetime-picker组件的相关说明。组件提供了丰富的配置选项，可以根据需求进行自定义。fields: 设置时间选择器展示的时间字段，如年、月、日、时、分等。运行项目，即可在页面中看到时间选择器，并能够选择时间。start: 设置时间选择器的起始时间。end: 设置时间选择器的结束时间。
uni-app制作一个时间选择器
m0_73481765的博客
12-22 594
方法将选择的时间格式化为小时：分钟的形式，并更新显示在页面上的时间。组件制作一个时间选择器。属性中，我们定义了可选的时间范围。在uni-app中，你可以使用。组件来创建时间选择器，设置了。为"time"，并且绑定了。在这个示例中，我们使用了。属性到当前选择的时间。当时间选择发生改变时，
uni-app - 日期 · 时间选择器
weixin_54721820的博客
11-22 8046
从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。当选择时间和日期的时候会默认直接展示当前的时间和当天的日期。
uniapp日历插件
qingdi1的博客
04-24 2804
【代码】uniapp日历插件。
uniapp日期选择器(年 月 日)
qq_36158551的博客
04-30 2076
【代码】uniapp日期选择器(年 月 日)
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 5360
自定义选择日、周、月、季、年的日期选择器组件
Uniapp-小程序简单的时间选择组件-年月日时分
Bruce__taotao的博客
02-24 3810
uniapp小程序开发系列。本文实现一个简单时间选择控件。uniapp用个心仪时间控件真的麻烦。官方给得要么年月日，要么时分。产品只要年月日时分。这该怎么玩。旧项目没有引入ui框架，我也不想去引入，不然高低整一个vant 小程序版的。uniapp生态中，有个插件市场，找了一通，是有时间控件。但是引入也是麻烦。没必要。下文基于网友给的案例再稍微改了改。对了 这是vue2 的。以上就是今天要讲的内容，本文讨论了用uniapp 实现小程序时间选择组件 仅仅支持 年月日时分 的简单版本。
微信小程序日期年月日范围选择的组件
01-18
适用于微信小程序的组件，主要是选择年月日的范围，可通过箭头选择上一年下一年，上一月下一月。并进行了日期校验，若开始日期晚于结束日期，则回自动切换开始日期为结束日期，同时，结束日期变为开始日期。 可以...
微信小程序酒店选择区间日历组件版（可通过参数实现是否显示农历日期）
04-19
)微信小程序酒店选择区间日历组件版，可通过参数实现是否显示农历日期。 博客：https://blog.csdn.net/qq_40591925/article/details/84834692 ( ios显示问题解决： 将：var startWeek = new Date('' + year + '...
年月日时分秒选择器.zip
04-28
综上所述，利用uniapp的picker组件实现年月日时分秒选择器是一个结合了数据绑定、事件处理、组件定制和响应式设计的过程。通过掌握这些知识点，开发者可以构建出满足多样化需求的时间选择器，提高应用的用户体验和...
实现了Android开发自定义年月日日期选择器，时分时间选择器
07-26
本话题主要探讨如何实现自定义的年月日日期选择器和时分时间选择器，这两个组件在许多应用程序中都非常常见，例如在事件安排、预约服务或者设置提醒等功能中。 首先，我们来看如何创建自定义的年月日日期选择器。这...
uniapp-日历控件
qq_44161703的博客
07-11 2562
chooseDay：已经选中（有标识）的日期 格式：chooseDay：['2023-02-02'] 样式也可以自己定义。actDay：鼠标点击的日期有选中的样式（可以自定义） 这个里面是 只能选中一个日期。onDayClick：有回调函数（e）e.data 就是选中的日期。第五步：修改源码中的选中和标识的样式（找到相应的位置）第二步：导入相应的项目，会有相应的提示（路径）第三步：引入对应的位置-例如我引入的位置。第一步：打开uniapp的插件市场。第四步：上面的名称解释下。
uniapp的 picker 日期时间选择器
m0_52611940的博客
08-30 5656
uniapp的 picker 日期时间选择器
【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例（完整代码+图文）
【敦厚的曹操】的专栏
03-03 4895
【uni-app】通过uni-app基础组件picker实现选择日期、时间的功能示例（完整代码+图文）
uniapp实现时间选择器动态获取年月日
weixin_62639453的博客
11-12 1375
由于在uniapp官网中找到的时间选择器，年份虽然固定，月固定是有12个月，但是日期是31日写死的，不能根据当前年和当前月动态更新日期。所以项目需要进行更新，实现能够根据年份月份进行对应的更新日期。
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、付费专栏及课程。

余额充值