vue-mobile-calendar

a vue component of calendar for mobile

移动端日期选择器（>=vue2.0）

点击查看DEMO，或手机扫描下方二维码

使用方法

npm安装

npm install vue-mobile-calendar

import 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 | ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] | 显示的星期文本 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]

Reference

• framework7