5 分钟给 Vue 项目装上移动端日历：Vue-Mobile-Calendar 安装配置指南

5 分钟给 Vue 项目装上移动端日历Vue-Mobile-Calendar 安装配置指南【免费下载链接】vue-mobile-calendara vue component of calendar for mobile移动端vue日期选择组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-mobile-calendarVue-Mobile-Calendar 是一个 Vue 移动端日历组件负责移动端日期选择单选、多选、时间段三种模式内置底部弹窗和页面内联两种展示形式。适合手上已有 Vue 2.x 项目、想快速补上日期选择能力的开发者5 分钟装完就能用。它适合做什么一句话把它塞进你的 Vue 2 项目手机上立刻多出一个月历。典型场景票夹、活动报名这类单选日期请假申请这类一次勾好几个工作日订单查询里挑起止时间段技术上它基于 Vue 2.x日期运算交给 Day.js一个只有 2KB 出头的轻量日期库你不需要额外装它。开装前的最后检查Node.js 12.x 或更高自带 npm或 yarn 也行项目本身是 Vue 2.xDay.js 会随组件一起装好不用操心两条安装路径选一条路径 Anpm 一行安装推荐npm install vue-mobile-calendar在入口文件里全局注册import Calendar from vue-mobile-calendar Vue.use(Calendar)之后模板里calendar /底部弹窗和inlineCalendar /嵌在页面任意位置都能直接用。只想要其中一个也可以单独局部注册import { calendar } from vue-mobile-calendar export default { components: { calendar } }路径 B拉源码跑起来想看交互细节、或打算二次改造直接把源码跑起来更直观git clone https://gitcode.com/gh_mirrors/vu/vue-mobile-calendar.git cd vue-mobile-calendar npm install npm run dev仓库里src/demos/目录摆了 9 个演示页三种模式各自长什么样跑起来对照着看最快。高频配置速查配置项作用mode选择模式single单选 /multiple多选 /during时间段默认单选defaultDate初始选中日期。单选传2024-01-01多选传数组时间段传[开始, 结束]disabledDate置灰不可点的日期列表如[2024-01-02, 2024-01-03]仅单选和多选模式支持minDate/maxDate限定可选范围的下限和上限注意二者不能和disabledDate同用enableTouch是否允许手指滑动切月默认开装完别漏的三件事 change事件的返回值单选是 1 个 dayjs 对象多选和时间段是数组取日期前先看mode 要字符串就date.format(YYYY-MM-DD)别自己拼时间Vue.use是全局注册两个组件随处可用只在一个页面用就按路径 A 里的写法局部注册装到这里组件就能正常出活了。更多属性自定义日期格内容、年月切换回调等都在项目根目录的 README.md 里写全了按需翻。【免费下载链接】vue-mobile-calendara vue component of calendar for mobile移动端vue日期选择组件项目地址: https://gitcode.com/gh_mirrors/vu/vue-mobile-calendar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考