VHC - 一款基于 vue3 的移动端日期、时间选择插件 功能丰富 文档细致


文档地址

https://hxkj.vip/calendar/

仓库地址

其他版本

API

Props

属性 说明 类型 默认 是否必传
visible 控制日历组件的显示或隐藏,需使用 v-model:visible Boolean false
scroll-change-date 控制滑动的时候是否修改选中的日期 Boolean true
model 日历组件以哪种形式展示。inline:内联的方式。dialog:弹窗的方式 String inline
default-datetime 指定默认时间。 Date 当前时间
min-date 指定日历最小日期范围,设置之后只能在该范围内滑动日历。 Date --
max-date 指定日历最大日期范围,设置之后只能在该范围内滑动日历。 Date --
format 确认日期时,回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天,当前时间 hh 时 mm 分”、“MM DD,YY at hh:mm F” String YY/MM/DD hh:mm
week-start 以星期几作为日历每一周的起始星期。可选['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] String sunday
picker-type 选择器类型 datetime:日期+时间 date:日期 time:时间 String datetime
show-today-button 是否显示返回今日按钮 Boolean true
show-week-view 是否以周视图展示组件 Boolean false
show-arrow 是否显示周月切换时的指示箭头(日历下方的小箭头),当 model 等于 inline 时生效 Boolean false
show-action 是否显示日历组件操作栏(标题栏) Boolean true
show-not-current-month-day 是否展示日历中的非本月日期(灰色部分日期) Boolean true
disabled-week-view 禁用周视图(设置为 true 后,无法上下滑动进行周/月切换) Boolean false
disabled-date 设置日期的禁用状态,参数为当前日期,要求返回 Boolean (禁用该日期需返回 true) Function ---
disabled-time 设置时间的禁用状态,参数为当前日期,要求返回 Boolean (禁用该时间需返回 true) Function ---
disabled-scroll 设置日历的禁止滑动方向。可选['left', 'right', 'up', 'down', 'horizontal', 'vertical', true, false] 。可取其一控制单个方向,其中 truefalse 控制所有方向。 Boolean, String false
mark-date 需要被标记的日期,可按不同颜色不同标记类型分组标记(不分组默认蓝色)。如:[{color: 'red',date: ['2019/02/25']},{color: 'blue',type: 'dot',date: ['2019/01/20']},'2019/03/20'] Array []
minute-step 间隔时间。(分钟的步长) Number 1
lang 选择的语言版本。可选值:['CN', 'EN'] String CN
change-year-fast 是否支持点击操作栏(标题栏)的日期区域快速切换年份 Boolean false
theme-color 用于修改日历主题色 { 'main-color': string; 'bg-color': string; 'main-font-color': string; 'vice-font-color': string; 'disabled-bg-color': string; 'disabled-font-color': string;} ---
disabled-class-name 日期被禁用时的 className。用于修改日期被禁用时的默认样式 String ---
not-current-month-day-class-name 非当前展示月份日期的 className(例如日历前面几天与后面几天灰色部分)。用于修改非当前展示月份日期的默认样式 String ---
checked-day-class-name 日期被选中时的 className。用于修改日期被选中时的默认样式 String ---
today-class-name 当天日期的 className。用于修改当天日期的默认样式 String ---
first-day-of-month-class-name 每月第一天的 className。用于修改每月第一天的默认样式 String ---

事件 Event

事件名称 说明 参数
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: 滑动的方向)
calendarTypeChange 日历展示类型切换时触发。返回值:date、month、year、yearRange 。 (type: 日历展示面板类型)

插槽 Slot

name 说明
day 自定义日期内容。例如可用于添加农历之类的。配合自定义 className 使用,效果更佳!参数为 { date, extendAttr },其中 extendAttr 参数包含 isMarked(该日期是否被标记)、isDisabledDate(该日期是否被禁用)、isToday(该日期是否为今天)、isChecked(该日期是否被选中)、isCurrentMonthDay(该日期是否为本月日期)、isFirstDayOfMonth(该日期是否为当月第一天),可用于一些特殊需求
week 自定义星期内容。例如可用于自定义星期样式等等。参数为 { week }
arrow 自定义周月切换时的指示箭头。参数为 { show },show: 类型为 Boolen,表示当前是否为周视图
today 自定义 "今天" 按钮文字内容以及样式
confirm 自定义 "确定" 按钮文字内容以及样式
action 自定义操作栏(标题栏)内容以及样式

方法 Method

方法名称 说明
lastMonth 切换日历到上一月
nextMonth 切换日历到下一月
lastWeek 切换日历到上一周
nextWeek 切换日历到下一周
today 返回今日。当今日被禁用时,不生效
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容