一,前言
我是刚学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代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="placeholder" :lang="lang" :position="position" :on-day-click="dayClick"> 2 </calendar>
JS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 var app = new Vue({ 2 el: "#app", 3 data: function() { 4 return { 5 disabled: [], //禁用的日期 6 value: new Date(), //值 7 format: "yyyy-MM-dd", //文本框中显示的日期格式 8 clear: false, //是否在文本框右侧显示清除按钮(X) 9 placeholder: "日期", //水印 10 position: "left", //日期面板位置,默认null和left 居左,right则靠右 11 lang: "" //语言,默认中文,可选值:zh-CN、en 12 }; 13 },