基于Vue2-Calendar改进的日历组件(含中文使用说明)
一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅…… 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化。 改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'。 日历面板增加一个位置选项,允许让面板右对齐,只需要position=right即可。 原 :on-day-click 事件只有在 hasInput=false 时才生效,现改为一直有效,这样当用户点击日历面板上的日期后就可以触发该事件。 clear=false时文本框右侧会显示一个日历图标,高仿bootstrap的日历组件,但clear=true时不显示 效果图 三,使用示例 1.常规使用,单日历 HTML代码: 1 < calendar v-model ="value" show-date-only :disabled-days-of-week ="disabled" :format ="format" :clear-button ="clear" :placeholder ="placeholder"