vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期

最新推荐文章于 2025-06-25 09:08:29 发布
最新推荐文章于 2025-06-25 09:08:29 发布
阅读量3.2w 收藏 11
点赞数 6
CC 4.0 BY-SA版权
分类专栏： vue 前端 文章标签： dateTimePicker vue mintUi 移动端日期组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gaoqiang1112/article/details/81280880
本文针对Mint UI中的Picker组件进行了详细的使用体验分享，指出了多个版本中存在的问题，如联动选择器对齐错误、iOS平台初始日期设置等，并提供了相应的解决办法。

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

=====================================追加提示2018.9.17===============================

继续填坑  如果你想修改  这个组件的 取消和确定按钮   则需要像下面的startDate一样

在标签上写  :cancel-text 和 :confirm-text  然后用一个vue变量接一下 设定一下值就可以了

这里我只想吐槽  属性怎么用  完全靠自己猜想   真的是可以了

=====================================追加提示2018.9.17===============================

=====================================追加提示2018.8.13===============================

这里在设置初始时间的时候  又遇到一个bug   你的web页面 在ios 和安卓打开的时候  安卓还好  ios 存在问题！！！！！

这里 楼主原来日期格式 都是 “2018-8-13”的格式 后来发现  如果你用这种格式设置初始时间 ios会有bug  显示错乱

然后 所有都要使用  “2018/8/13” 这种格式  这种格式在ios里 不会报错

=====================================追加提示2018.8.13===============================

==============================正文===========================

首先必须吐槽 mintui

<script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>
<link href="https://cdn.bootcss.com/mint-ui/2.2.13/style.css" rel="stylesheet" type="text/css">

这个2.2.13版本中picker 联动  你拉一会就对不上值了  也不知道这么大的bug  mintui自己看不见么  然后搜了一圈

大家推荐2.2.9版本  说这个靠谱点 

这里假设 如果你有一个需求 比如 起始日期为某年的某月  而不是当前时间开始 

那么mintui的 picker 你可以放弃了 

他的这个onValuesChange方法 那叫一个乱 

 这里我友情提示这个方法返回2个参数 第一个参数是picker对象，第二个values里是你联动的选中值的数组，（如下图）

这里还不难  不过如果你想懂官网的这句（下面的图），你会发现官网一个例子都没有，你都不知道咋用，

提示下，也就是这么写，

,

index是values这个数组长度内的值 比如你2列拉动 那么index 就是0，1

如果你3级联动那就是0，1，2          剩下的你自己悟吧

=======================================华丽的分割线=========================================

上面纯属吐槽 ，这个组件太垃圾了。回到我们的要求 如果你想设定拉动的初始值，比如日期的

你需要使用DateTime Picker        这个组件又是一个大坑

（这里我真是服了，包括官网，你们给的api 自己不试么 给别人的例子也不试？？？？？？？）

来看官网

这是楼主用的，由于业务要求只显示年和月，所以要去掉日，这里尝试删除date-formate 或给他的value设置null和空字符串

均失败！！！！！！！！！！！！！！！！！！！！！！！

就问你服不服这组件，然后楼主没办法只能靠js+css了，没办反，如果你有更好的，可以告诉我

好了，日不显示了，然后就是最大的坑了，设定起止时间

来看官网

然后楼主就写成这个样子,问题来了。 他！不！好！使！！！！！！

然后百度，官网+所有百度到的都是这么写

https://www.cnblogs.com/smallteeth/p/8004462.html   链接1

https://blog.youkuaiyun.com/mhlghy/article/details/80269774  链接2

https://blog.youkuaiyun.com/thekingyu/article/details/78974852 链接3

我不再挂链接了  反正都是一个样 也没一个好使，我也是服了。最后，还是英语救了楼主

这是js控制台报的弱警告，然后楼主读了一遍 大概明白了 所以做了替换  结果    好！使！了！

哎，这年代，谁都靠不住，只能靠自己，希望这博客能帮助到使用这个组件的人。

我把页面源码挂出来，需要的去下载吧

https://download.youkuaiyun.com/download/gaoqiang1112/10571933  链接

vue日期选择器 移动端_适用于Vue的移动友好日期时间选择器
cuk5340的博客
07-23 3168
vue日期选择器 移动端 约会时间 (vue-datetime) Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates. Vue的移动友好日期时间选择器。 支持日期，日期时间和时间模式，i18n和禁用日期。 NOTICE: This RE...
【Vue2.0】 mint-ui解决移动端picker和datetime picker穿透滚动问题
热门推荐
amyleeYMY的博客
09-10 1万+
在使用mint-ui的弹窗时，滚动弹窗内部分区域，会导致页面滚动。 我测试的时候是安卓和ios使用picker时都有这个问题；使用datetime picker时只有ios会出现这个问题。 我看了下源码，发现datetime picker的弹窗是引用的picker的组件，emmmm...，有点奇怪同一个组件在安卓上显示还不一样。 那我们先来看下解决办法吧，解决办法主要参考这里： 思路很简单...
Vue移动端开发的适配方案与性能优化技巧
最新发布
鹏多多的博客
06-25 876
本文介绍了Vue移动端开发的适配方案与性能优化技巧。主要内容包括：1）视口适配、rem/em和vw/vh单位转换等移动端布局方案；2）虚拟列表、图片懒加载、首屏优化和事件节流等性能优化手段；3）解决移动端300ms点击延迟等常见问题的方案。通过配置PostCSS插件、使用响应式UI组件库以及优化资源加载等方法，可显著提升移动端应用的适配性和性能表现。
VUE: 关于DateTimePicker 日期时间选择器
m0_64393334的博客
04-21 711
在使用时注意value-format=‘yyyy-MM-DD HH:mm:ss’
Vue Mint-UI Datetime picker 中的起始时间和结束时间
weixin_43294092的博客
07-01 1245
Vue Mint-UI Datetime picker 中的起始时间和结束时间 Datetime picker 效果 1、官网效果 官网上给出了一些 API 文档，但是 Mint UI 的文档 写的真心不怎么样，这里分享一下 Mint UI 的源码，这里是 Datetime picker 的源码。 既然是选择出生日期，那可选日期当然需要做一些限制，粗略地处理为 1900-01-01 ~ 当前时间。注意到文档中的 startDate 和 endDate 可以控制起止时间，但是没有说明如何使用，源码中也没有
vue20移动端时间选择器
08-12
Vuetify 提供了 VDatePicker，Element UI 有 DatePicker 组件，它们都具有良好的可定制性和兼容性，可以方便地与 Vue 2.0 结合使用。这些组件通常包括年、月、日、小时和分钟的选择，有的还支持秒和时区选择，以满足...
vue2-persian-datepicker-vue的真棒波斯datepicker组件。 视图的日期选择组件。-Vue.js开发
05-27
vue波斯语datepicker这是Vue的Jalali日期选择器组件。 该程序是一个辉煌的历史选择组件。 演示您可以看到一个演示和vue波斯语的日期选择器。这是Vue的Jalali日期选择器组件。 该程序是一个辉煌的历史选择组件。 演示...
vue移动端日历显示查看每日详情列表
y13488733540的博客
03-27 1816
vue移动端日历显示查看日期详情列表 效果图 # 使用cmd命令 npm install v-calendar package.json和package-lock.json配置信息如下 在页面中引入并注册组件 import { setupCalendar, DatePicker } from "v-calendar"; import { mapGetters, mapActions } fro...
vue移动端日期选择组件
weixin_34384557的博客
02-13 3303
vue-mobile-calendar a vue component of calendar for mobile移动端日期选择器（>=vue2.0） 点击查看DEMO，或手机扫描下方二维码 使用方法 npm安装 npm install vue-mobile-calendar import Calendar from 'vu...
vue-price-calendar:vue移动端日历插件
05-18
价格价格日历 vue价格日历 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 有关工作原理的详细说明，请参阅。
vue-date-pick:基于 Vue 的轻量级和移动友好的日期时间选择器。 Vue 日期选择强调所有屏幕尺寸上的性能、优雅和可用的 UI 以及配置的简单性。 不依赖于 css 框架或日期库。 重量小于 5KB
05-29
Vue日期选择 基于 Vue 的轻量级和移动友好的日期时间选择器。 Vue 日期选择强调所有屏幕尺寸上的性能、优雅和可用的 UI 以及配置的简单性。 不依赖于 css 框架或日期库。 重量小于 5KB。 文档和演示 。
移动端使用vue封装日历
Quinta12的博客
03-24 701
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue 移动版日历_Vue2响应式＆移动优先的简单事件日历
cuk5340的博客
07-19 295
vue 移动版日历 事件事件日历 (vue-event-calendar) A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Vue2的简单事件日历，除Vue2外没有其他依赖项。 响应式和移动优先。 现场演示 (Live demo) http://g...
Vue自定义组件选择区间段日期-基于mintui封装的日历组件
zuo-yiran的博客
11-19 1332
实现入下图所示需求： 组件的具体代码： <template> <div class="calendar"> <div class="calendar-box"> <div class="title-area"> <div class="title-div">日期选择</div> <i @click="cancelDate" class="iconfont icon-guanbi title-clos
vue 日期选择器 （DateTimePicker 日期时间选择器）
声声的博客
09-05 2309
【代码】vue 日期选择器 （DateTimePicker 日期时间选择器）
Vue移动端日期选择器（datepicker.js）
weixin_44979432的博客
04-28 6532
声明：因为帮忙用到移动端用到日期选择器，效果如图 使用方法： 第一步：在main.js中引入 import datePicker from "../static/js/datePicker.js" Vue.use(datePicker) 第二步：在.vue文件中使用 <input id="demo" type="text" placeholder="选择出生日期" readonly&gt...
写了一个基于vue的移动端picker，可以设置城市／datetime／自定义选择，分享给大家～～...
weixin_33866037的博客
08-29 1503
传送门 npm 传送门 github 传送门 使用指南 npm install i-picker --save 复制代码import iPicker from 'i-picker'; Vue.use(iPicker); 复制代码普通 Picker 代码演示 基础用法 通过 values 来设置默认值或改变对应值，注意不要设置列表数据中不存在的value值 非datetime需要设置 column...
基于vue移动端考勤管理打卡系统
03-09
<think>好的，我现在需要处理用户关于基于Vue的移动端考勤管理打卡系统的查询。首先，用户提到了几个引用来源，我需要先看看这些引用内容是否相关。引用[1]提到了很多Vue相关的日历组件和打卡功能，引用[2]和[3]也涉及Vue实现的考勤系统和示例代码。看起来用户需要具体的教程或示例代码来实现这些功能。 接下来，用户的问题主要集中在如何实现移动端的考勤打卡系统，包括日历显示、签到定位、缺卡补卡等功能。我需要确保回答覆盖这些关键点，并且结构清晰，分步骤说明。 首先，系统核心功能点。需要列出考勤日历、定位打卡、缺卡补卡和数据统计这几个主要模块。然后，技术选型方面，Vue2或Vue3都是可行的，UI框架可以选择Vant或NutUI，定位需要用到高德或腾讯地图的API，数据可视化可能用ECharts。 接着，分步骤实现。日历组件是关键，可能需要使用现有的库如vue-calendar-flex，或者自定义开发。需要处理日期渲染、签到状态标记。定位打卡部分要调用浏览器的地理位置API，并处理权限问题，同时需要后端接口保存数据。缺卡补卡功能需要弹窗让用户选择日期和原因，提交后更新状态。数据统计部分用ECharts生成图表展示考勤情况。 示例代码部分，需要提供Vue3的组件代码，展示基本的日历结构和签到状态处理。同时，要说明如何集成定位功能和补卡弹窗。此外，注意事项部分要提到权限处理、日期格式和状态同步的问题。 相关问题部分，需要生成几个与实现细节、优化和第三方库相关的问题，帮助用户进一步探索。最后，引用来源要正确标注，确保用户可以参考提供的资料。 现在需要检查是否所有用户提到的功能点都有覆盖，比如日历显示签到状态、定位、补卡等。同时，确保回答中的技术建议和步骤可行，示例代码正确，并且引用来源恰当。可能还需要提醒用户关于权限和实时同步的问题，这些都是实际开发中常见的坑。 最后，组织语言要简洁明了，分点说明，让用户能够逐步跟随实现。确保使用中文，并且数学公式或代码块格式正确，虽然这个问题中代码部分较多，但用户没有特别提到数学公式，所以可能不需要处理这部分。不过根据系统指令，行内公式要用$...$，独立公式用$$...$$，但在这个回答中可能用不上，所以可以忽略。</think>以下是关于基于Vue移动端考勤管理打卡系统的实现指南，结合引用资料整理： ### 一、系统核心功能点 1. **考勤日历组件** - 展示带日期标记的月视图/周视图 - 显示每日考勤状态（正常/缺卡/补卡） - 支持日期点击事件，如查看考勤详情[^1] 2. **定位签到功能** - 调用浏览器地理位置API获取经纬度 - 设置有效签到范围（如半径100米内） - 实现实时定位标记与防作弊验证[^1] 3. **缺卡补卡机制** - 自动识别未打卡日期 - 提交补卡申请（选择日期+上传证明） - 审批流程状态同步更新[^3] 4. **数据统计展示** - 使用ECharts生成月度考勤统计图 - 展示出勤率、异常考勤比例等指标 ```javascript // Vue3示例：基础日历组件结构 <template> <div class="calendar"> <div v-for="day in days" :key="day.date" :class="['day', { 'signed': day.signed }]" @click="handleSign(day)"> {{ day.date.getDate() }} <span v-if="day.signed" class="dot"></span> </div> </div> </template> <script setup> import { ref } from 'vue'; const days = ref(/* 生成当月日期数据 */); const handleSign = (day) => { if (!day.signed) { // 调用定位接口并提交签到 } }; </script> ``` ### 二、技术选型建议 1. **框架选择** - Vue2/Vue3均可（推荐Vue3+TS） - 移动端UI库：Vant/NutUI[^1] 2. **地图定位** - 高德地图JS API（Web端） - 腾讯地图SDK（微信生态） 3. **日期处理** - Day.js轻量库 - vue-calendar-flex组件库 ### 三、关键实现步骤 1. **日历组件集成** ```bash npm install vue-calendar-flex --save ``` ```javascript <Calendar :markDate="markedDates" @choseDay="onDayClick" /> ``` 2. **定位功能实现** ```javascript const getLocation = () => { navigator.geolocation.getCurrentPosition( position => { console.log(position.coords.latitude, position.coords.longitude); }, error => {/* 处理权限拒绝情况 */} ); }; ``` 3. **补卡弹窗组件** ```vue <van-dialog v-model:show="showReissue"> <van-datetime-picker v-model="selectedDate" type="date" /> <van-field v-model="reason" label="补卡原因" /> </van-dialog> ``` ### 四、注意事项 1. **权限处理** - 需处理iOS/Android的定位权限请求 - 建议添加`<meta name="viewport">`移动端适配[^2] 2. **数据同步** - 使用WebSocket或轮询实现考勤状态实时更新 - 本地缓存上次签到位置防止重复提交 3. **安全机制** - 限制每日补卡次数 - 后端校验定位坐标有效性
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值