vue滑动选择日期插件_vue-hash-calendar, 移动端日期时间选择插件 (使用篇)

vue-hash-calendar, 移动端日期时间选择插件 (使用篇)

按照惯例, 先上效果图

image

image

image

vue-hash-calendar

基于 vue 2.X 开发的日历组件

支持手势滑动操作. 1

原生 JS 开发, 没引入第三方库

上下滑动 切换 周 / 月 模式

[周模式中] 左右滑动可切换 上一周 / 下一周

[月模式中] 左右滑动可切换 上一月 / 下一月

安装使用说明NPM i vue-hash-calendar

// 在入口文件中 (main.JS), 导入组件库

importvueHashCalendarfrom'vue-hash-calendar'

// 引入组件 CSS 样式

import'vue-hash-calendar/lib/vue-hash-calendar.css'

// 注册组件库

Vue.use(vueHashCalendar)

// 在 VUE 文件中引入组件

Demo

qr_code

或者请用浏览器的手机模式查看: https://www.hxkj.vip/demo/calendar/

觉得好用可以给一个 star 哦~~

GitHub 地址: https://github.com/TangSY/vue-hash-calendar

API属性说明类型默认是否必传visible控制日历组件的显示或隐藏, 需使用 .sycn 修饰符Booleanfalse否

scrollChangeDate控制滑动的时候是否修改选中的日期Booleantrue否

model日历组件以哪种形式展示。inline：内联的方式。dialog：弹窗的方式Stringinline否

defaultDatetime指定默认时间。Date当前时间否

format确认日期时，回调事件返回的日期格式。如 “YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”StringYY/MM/DD hh:mm否

weekStart以星期几作为日历每一周的起始星期。可选 ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']Stringsunday否

pickerType选择器类型 datetime：日期 + 时间 date：日期 time：时间Stringdatetime否

showTodayButton是否显示返回今日按钮Booleantrue否

isShowWeekView是否以周视图展示组件Booleanfalse否

disabledWeekView禁用周视图(设置为 true 后，无法上下滑动进行周 / 月切换)Booleanfalse否

disabledDate设置日期的禁用状态，参数为当前日期，要求返回 Boolean (禁用该日期需返回 true)Function---否

markDate需要被标记的日期，可按不同颜色分组标记(不分组默认蓝色)。如：[{color: 'red',date: ['2019/02/25']},{color: 'blue',date: ['2019/01/20']},'2019/03/20']Array[]否

markType标记图案类型 dot：小圆点(日期下方小圆点标记) circle：小圆圈(日期被小圆圈包围) dot+circle：同时使用小圆点与圆圈标记Stringdot否

minuteStep间隔时间。(分钟的步长)Number1否

事件事件名称说明参数change日期改变时，触发该事件。(返回的日期格式取决于 format 属性)(date: 日期改变时，选中的日期)

confirm点击确认按钮时，触发该事件，dialog 模式中才有该按钮。(返回的日期格式取决于 format 属性)(date: 点击确认按钮时，选中的日期)

click点击日期时，触发该事件。(返回的日期格式取决于 format 属性)(date: 当前点击的日期)

touchstart日历滑动 start 事件，同于原生该事件。(event: touch 事件)

touchmove日历滑动 move 事件，同于原生该事件。(event: touch 事件)

touchend日历滑动 end 事件，同于原生该事件。(event: touch 事件)

slidechange日历滑动的方向。返回值：right、left、up、down 。(direction: 滑动的方向)

版本记录

changelog

Other

在 dialog 模式中, 如何显示日历组件? 注意使用 .sync 修饰符

// 设置为 true this.isShowCalendar = true;

如何设置禁用日期? 可参考源码中 App.vue 文件// 例如禁用今日之后的所有日期

/** vue 模板文件 **/

/** vue methods 中的方法 **/

disabledDate(date){

lettimestamp=date.getTime();

if(timestamp>newDate().getTime()){

returntrue

}

returnfalse

}

如果有其他问题, 或者功能上不兼容的. 可以邮件沟通 t@tsy6.com, 或者 GitHub 提交 issue.

赞助

pay.jpg

来源: http://www.jianshu.com/p/c088746157a8