vue-mobile-calendar
a vue component of calendar for mobile
移动端日期选择器（>=vue2.0）
点击查看DEMO，或手机扫描下方二维码
使用方法
npm安装
npm install vue-mobile-calendarimport Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);外部引用方式，引入目录文件disk/Calendar.umd.min.js
<script src='/dist/Calendar.umd.min.js'></script>注意
本次版本升级api与2.x版本不相同，2.x版本api请点击查看
更新日志
- V3.0.0(2019-3-16) 增加多选、时间段选择模式；增加日期内联显示方式；部分api与2.x不相同，升级请注意
Quickstart
<template>
<div id="demo">
<calendar @change="onChange"/>
<inlineCalendar />
</div>
</template>
<script>
// Vue.use(Calendar)后可直接使用`<calendar />`和`<inlineCalendar />`组件。calendar为底部弹窗显示，inlineCalendar为页面内联显示（可放置页面任意地方）
export default {
methods: {
onChange(date) {
console.log(date.format('YY-MM-DD'));
},
},
};
// 或者在.vue文件中单独引入注册
// import {calendar,inlineCalendar} from 'vue-mobile-calendar';
// export default {
// components: {
// calendar,
// },
// };
</script>关于日期类型
组件中日期处理依赖dayjs(api和moment相同，大小仅2kb)，如在设置defaultDate时，所支持类型如下：
当前时间
直接运行 dayjs()，得到包含当前时间和日期的 Dayjs 对象。
dayjs()时间字符串
可以解析传入的一个标准的ISO 8601时间字符串。
dayjs(String)
dayjs('1995-12-25')Date 对象
可以解析传入的一个 Javascript Date 对象。
dayjs(Date)
dayjs(new Date(2018, 8, 18))Unix 时间戳 (毫秒)
可以解析传入的一个 Unix 时间戳 (13 位数字)。
dayjs(Number)
dayjs(1318781876406)Unix 时间戳 (秒)
可以解析传入的一个 Unix 时间戳 (10 位数字)。
dayjs.unix(Number)
dayjs.unix(1318781876)更多api查看dayjs
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
mode | String | ‘single’ | 时间选择模式，single:单选模式；multiple:多选模式；during:时间段选择模式 |
defaultDate | [Date, Number, Array, String] | – | 默认已选时间，mode为单选模式时为Dayjs所支持的时间类型(见上面说明)，如’1995-12-25’；mode为多选模式为数组形式；mode为时间段选择模式为长度2的数组，如[startDate,endDate] |
disabledDate | Array | [] | 不可选日期，仅mode为’single’和’multiple’下支持 |
enableTouch | Boolean | true | 允许手势滑动切换月份 |
monthNames | Array | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] | 显示的月份文本 |
weekNames | Array | ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | 显示的星期文本 |
closeByClickMask | Boolean | true | 允许点击遮罩层关闭（仅弹窗显示形式的calendar生效） |
dayClick | Function | – | 日期点击时的回调函数，回调参数为当前所点击的日期，return false将不会执行选中、取消选中的操作 |
事件
| 名称 | 说明 | 回调 |
|---|---|---|
| change | 当前所选日期改变 | 回调参数为当前所选日期（dayjs类型，如获取时间字符串：date.format('YYYY-MM-DD')），mode为单选模式时为date；mode为多选模式为[date1,date2]；mode为时间段选择模式为[startDate,endDate]，当只选了开始时间时会为[startDate] |
Reference
本文来自segmentfault，本文观点不代表 PmTemple 立场，转载请联系原作者。原文链接：https://segmentfault.com/a/1190000013284700
微信扫一扫 
支付宝扫一扫 
评论列表（5条）
这个Vue移动端日期选择组件看起来很实用！多选和时间段选择功能对于日程管理类应用特别有帮助，内联显示方式也很灵活。不过API从2.x到3.x的变化较大，升级时需要注意兼容性问题。
移动端日期选择，核心在于简洁与直观。这个组件多选和内联显示功能实用，但API变更需谨慎。极简设计不只是视觉，更是交互逻辑的减法。
这个vue移动端日期选择组件看起来超实用啊！作为经常在移动设备上处理行程安排的摄影师，这种轻量级的日期选择器太适合我们的移动端应用了。简洁的API设计加上多选模式，简直是为旅行APP量身定做的！📸✈️
这个日期选择组件就像我的健身课程安排工具，多选和时间段选择功能太实用了！底部弹窗和内联显示两种模式灵活切换，适合不同场景。API升级虽然要注意兼容性，但新功能让移动端日期选择更高效了。
这组件就像健身计时器，实用！多选功能不错，能选时间段更方便。健身也要精确记录时间，这个工具正好派上用场。简单直接，我喜欢！