企业官网建设流程全解析

Vue 移动端日历组件完整指南：3 步装好并自定义配置

【免费下载链接】vue-mobile-calendara vue component of calendar for mobile移动端vue日期选择组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-mobile-calendar

vue-mobile-calendar 是一个面向 Vue 2 的移动端日期选择组件：单选、多选、时间段三种模式，弹窗或页面内联两种显示形态，底层基于 dayjs 处理日期。本文带你走完安装、接入到常用配置，几分钟就能跑起来。

它解决了什么问题 📅

表单、订单、预约场景里要选日期，原生 input 体验又丑又难用。这个组件把常见需求都收进一个组件里：

• 三种选择模式：单选single、多选multiple、时间段during
• 两种显示形态：底部弹窗calendar、页面内联inlineCalendar
• 基于 dayjs，默认日期、最大最小可选范围等配置都用 dayjs 兼容的类型
• 星期、月份文本与手势滑动均可定制，日期格还能用插槽放自定义内容

装之前，先花 1 分钟确认 ✅

• 项目基于 Vue 2.x，Vue 3 项目用不了。
• 本地跑源码需要 Node.js 12 及以上，npm 随 Node 一起装好即可。
• 如果拿的是仓库源码，先npm install，再执行npm run dev，终端提示编译成功、浏览器打开默认地址能看到 demo 页面。

三步跑起来 🚀

第一步，装包。在 Vue 2 项目里执行：

npm install vue-mobile-calendar

装完后终端打印added x packages之类提示，项目node_modules下出现vue-mobile-calendar目录即成功。

第二步，引入组件。从 npm 包引入默认导出，用Vue.use全局注册一遍；不想全局注册的话，也可以按单文件方式单独引入calendar注册到组件所在文件。

第三步，最小示例。在页面模板里写：

<template> <calendar @change="onChange" /> </template> <script> export default { methods: { onChange(date) { console.log(date.format('YYYY-MM-DD')); } } }; </script>

保存后刷新页面，屏幕底部弹出一个整月日历，点任意一天，控制台立即打出YYYY-MM-DD格式的日期字符串，接入就算完成。页面里想平铺一块日历，再写一个<inlineCalendar />即可。

移动端日期选择器配置速查 📋

两个常用方法一并记牢：changeDate改变已选日期，changeDateView改变当前显示的月份，都通过this.$refs调用，参数同样是 dayjs 兼容的类型。

容易踩的坑 🕳️

Q：多选或时间段模式下@change为什么报错？

回调参数不再是单个 dayjs 对象，而是数组：多选为[date1, date2]，时间段为[startDate, endDate]，只选了开始日期时只有[startDate]。数组要先map再format，别对数组直接调用format。

Q：为什么禁用的日期没有生效？

disabledDate和minDate/maxDate不能同时使用。超范围的日子交给最小/最大日期控制，零散禁用的日子才用disabledDate。

Q：我是 2.x 的老用户，直接升级 3.x 可以吗？

不行。3.x 的 API 与 2.x 不同，从 2.x 升级时对照新文档逐项检查 props 与回调结构，别直接改版本号。

到这里，弹窗、内联、三种模式就都齐了。想继续看完整 props、事件与插槽（v-slot:day）定义，直接读仓库根目录的 README 和 lib 组件源码 即可。

【免费下载链接】vue-mobile-calendara vue component of calendar for mobile移动端vue日期选择组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-mobile-calendar