vue 日期面板_基于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

2

View Code

JS代码:

1 var app = newVue({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 },14 methods: {15 //鼠标点击日历面板上的日期时的事件,

16 //传递的两个参数均是同一个值,只是类型不同,随便用哪个看个人需要

17 //date 是 Date 类型

18 //dateStr 是 String 类型

19 dayClick: function(date, dateStr) {20 console.log(date);21 console.log(dateStr);22 console.log(this.value);23 }24 },25 compone

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值