a vue component of calendar for mobile
移动端日期选择器(>=vue2.0)
点击查看DEMO,或手机扫描下方二维码
npm install vue-mobile-calendar
import Calendar from 'vue-mobile-calendar'
Vue.use(Calendar);
<script src='/dist/Calendar.umd.min.js'></script>
本次版本升级api与2.x版本不相同,2.x版本api请点击查看
- V3.0.0(2019-3-16) 增加多选、时间段选择模式;增加日期内联显示方式;部分api与2.x不相同,升级请注意
<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')可以解析传入的一个 Javascript Date 对象。
dayjs(Date) dayjs(new Date(2018, 8, 18))可以解析传入的一个 Unix 时间戳 (13 位数字)。
dayjs(Number) dayjs(1318781876406)可以解析传入的一个 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 |
['周一', '周二', '周三', '周四', '周五', '周六', '周日'] |
显示的星期文本 |
show |
Boolean |
false |
显示/关闭时间选择器弹窗(仅弹窗显示形式的calendar生效),可以使用sync修饰符:show.sync="isShow" 来对此属性进行双向绑定,方便控制组件的显示隐藏 |
closeByClickMask |
Boolean |
true |
允许点击遮罩层关闭(仅弹窗显示形式的calendar生效) |
dayClick |
Function |
- | 日期点击时的回调函数,回调参数为当前所点击的日期,return false 将不会执行选中、取消选中的操作 |
名称 | 说明 | 回调 |
---|---|---|
change | 当前所选日期改变 | 回调参数为当前所选日期(dayjs类型,如获取时间字符串:date.format('YYYY-MM-DD') ),mode 为单选模式时为date ;mode 为多选模式为[date1,date2] ;mode 为时间段选择模式为[startDate,endDate] ,当只选了开始时间时会为[startDate] |