1. PmTemple首页
  2. 前端大牛

vue移动端日期选择组件

vue-mobile-calendar

vue移动端日期选择组件
安装NPM

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

属性

名称类型默认值说明
modeString‘single’时间选择模式,single:单选模式;multiple:多选模式;during:时间段选择模式
defaultDate[Date, Number, Array, String]默认已选时间,mode为单选模式时为Dayjs所支持的时间类型(见上面说明),如’1995-12-25’;mode为多选模式为数组形式;mode为时间段选择模式为长度2的数组,如[startDate,endDate]
disabledDateArray[]不可选日期,仅mode为’single’和’multiple’下支持
enableTouchBooleantrue允许手势滑动切换月份
monthNamesArray['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']显示的月份文本
weekNamesArray['周一', '周二', '周三', '周四', '周五', '周六', '周日']显示的星期文本
closeByClickMaskBooleantrue允许点击遮罩层关闭(仅弹窗显示形式的calendar生效)
dayClickFunction日期点击时的回调函数,回调参数为当前所点击的日期,return false将不会执行选中、取消选中的操作

事件

名称说明回调
change当前所选日期改变回调参数为当前所选日期(dayjs类型,如获取时间字符串:date.format('YYYY-MM-DD')),mode为单选模式时为datemode为多选模式为[date1,date2]mode为时间段选择模式为[startDate,endDate],当只选了开始时间时会为[startDate]

Reference

本文来自segmentfault,本文观点不代表PmTemple立场,转载请联系原作者。原文链接:https://segmentfault.com/a/1190000013284700

发表评论

电子邮件地址不会被公开。 必填项已用*标注