基于Vue2-Calendar改进的日历组件(含中文使用说明)


Posted in Javascript onApril 14, 2019

一,前言

我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅……

于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版

二,改进的功能

在Vue2-Calendar v2.2.4 版基础上作了优化。

1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'。

2.日历面板增加一个位置选项,允许让面板右对齐,只需要position=right即可。

3.原 :on-day-click 事件只有在 hasInput=false 时才生效,现改为一直有效,这样当用户点击日历面板上的日期后就可以触发该事件。

4.clear=false时文本框右侧会显示一个日历图标,高仿bootstrap的日历组件,但clear=true时不显示

效果图

基于Vue2-Calendar改进的日历组件(含中文使用说明)基于Vue2-Calendar改进的日历组件(含中文使用说明)基于Vue2-Calendar改进的日历组件(含中文使用说明)

三,使用示例

1.常规使用,单日历

基于Vue2-Calendar改进的日历组件(含中文使用说明)

HTML代码:

<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代码:

var app = new Vue({
      el: "#app",
      data: function() {
        return {
          disabled: [], //禁用的日期
          value: new Date(), //值
          format: "yyyy-MM-dd", //文本框中显示的日期格式
          clear: false, //是否在文本框右侧显示清除按钮(X)
          placeholder: "日期", //水印
          position: "left", //日期面板位置,默认null和left 居左,right则靠右
          lang: "" //语言,默认中文,可选值:zh-CN、en
        };
      },
      methods: {
        //鼠标点击日历面板上的日期时的事件,
        //传递的两个参数均是同一个值,只是类型不同,随便用哪个看个人需要
        //date 是 Date 类型
        //dateStr 是 String 类型
        dayClick: function(date, dateStr) {
          console.log(date);
          console.log(dateStr);
          console.log(this.value);
        }
      },
      components: {
        calendar: Calendar
      }
    });

 2.常规使用,双月日历

基于Vue2-Calendar改进的日历组件(含中文使用说明)

HTML代码:

<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" :pane="2">
2       </calendar>

JS代码:

var app = new Vue({
      el: "#app",
      data: function() {
        return {
          disabled: [], //禁用的日期
          value: new Date(), //值
          format: "yyyy-MM-dd", //文本框中显示的日期格式
          clear: false, //是否在文本框右侧显示清除按钮(X)
          placeholder: "日期", //水印
          position: "left", //日期面板位置,默认null和left 居左,right则靠右
          lang: "" //语言,默认中文,可选值:zh-CN、en
        };
      },
      methods: {
        //鼠标点击日历面板上的日期时的事件,
        //传递的两个参数均是同一个值,只是类型不同,随便用哪个看个人需要
        //date 是 Date 类型
        //dateStr 是 String 类型
        dayClick: function(date, dateStr) {
          console.log(date);
          console.log(dateStr);
          console.log(this.value);
        }
      },
      components: {
        calendar: Calendar
      }
    });

3.双日历联动,通常用在开始和结束时间的选择上,结束时间不能早于开始时间

基于Vue2-Calendar改进的日历组件(含中文使用说明)

说明:当选择了开始时间后,结束时间选择时会显示哪些日期可选,并且显示已经选择的开始时间

HTML代码:

<calendar v-model="value" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="'起始时间'" :lang="lang" :position="position" :on-day-click="dayClick" :pane="1" :range-bus="getBus" :range-status="1"></calendar>
2    <calendar v-model="value2" show-date-only :disabled-days-of-week="disabled" :format="format" :clear-button="clear" :placeholder="'结束时间'" :lang="lang" :position="position" :on-day-click="dayClick" :pane="1" :range-bus="getBus" :range-status="2"></calendar>

JS代码: 

var app2 = new Vue({
   el: "#app2",
   data: function() {
    return {
     disabled: [],
     value: new Date(),
     value2: new Date(),
     format: "yyyy-MM-dd",
     clear: false,
     placeholder: "Start Date",
     position: "left",
     lang: "",
     bus: new Vue()
    };
   },
   methods: {
    dayClick: function(date, dateStr) {
     console.log('value=' + this.value);
     console.log('value2=' + this.value2);
    },
    getBus: function() {
     return this.bus;
    }
   },
   components: {
    calendar: Calendar
   }
  });

四,参数说明(翻译的官方文档)

安装(需要node支持)

$ npm install vue2-slot-calendar

导入模块

// js file
import 'vue2-slot-calendar/lib/calendar.min.css';
import calendar from 'vue2-slot-calendar/lib/calendar';
// vue file
// in ES6 modules
import Calendar from 'vue2-slot-calendar';
// in CommonJS
const Calendar = require('vue2-slot-calendar');
// in Global variable
const VueCalendar = Calendar;

直接引用编译好的js文件(推荐)

<link rel="stylesheet" href="/lib/calendar.min.css" rel="external nofollow" >
<script src="/lib/calendar.min.js"></script>

多语言支持

系统提供window.VueCalendarLang 勾子函数来让用户自定义语言,

window.VueCalendarLang=function(lang){
 return {}; //对象必须是下面JSON格式 
};

上面勾子函数返回的必须是下面格式的JSON对象。

下面的脚本在 /src/lang/zh-CN.js 中有

{
 daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
 limit: "超过限制 (最多{{limit}}项)",
 loading: "加载中...",
 minLength: "最小长度",
 months: [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一",
  "十二"
 ],
 notSelected: "未选择",
 required: "必填项",
 search: "查找"
}

构建步骤

# 安装依赖
npm install
# 运行开发服务器 localhost:4000
npm run dev
# 编译(压缩JS和CSS等)
npm run build
# 单元测试
npm run unit
# 运行所有测试
npm test

参数和事件

Name Type Default Description
value String '' 组件输入输出的值,即 v-model 的值
width String '200px' input文本框的宽度
format String yyyy-MM-dd 日期格式,可用值: d, dd, M, MM, MMM, MMMM, yyyy.
disabled-days-of-week Array   每周有哪些天禁用,可用值0-6,多个值则用逗号隔开
clear-button Bollean false 是否显示清除按钮,显示清除按钮时右侧的日历图标不显示,不显示清除按钮时则显示日历图标
placeholder String   文本框中显示的水印
hasInput Boolean true 是否显示文本框
pane Number 1 日历面板数量,默认1,双月日历设为2即可,目前仅支持1和2
borderWidth Number 2 日历面板边框线宽度
onDayClick Function   点击日期时的事件,已改为不受hasInput值的限制,总是触发
specialDays Object   特殊日期
changePane Function   切换日历面板时的事件, 暂时还没研究这个,大多数情况下用不到,请参考  /src/modules/Docs.vue
rangeBus Function   暂时不明白啥意思,请总是返回一个 new Vue() 就对了
rangeStatus Number 0 日期范围状态,默认0表示不使用日期范围,1表示双日历联动的起始日期,2表示双日历联动的结束日期
onDrawDate Function   绘制日期时的事件,可以让用户自定义日历样式
showDateOnly Boolean false 是否只显示日历面板
transfer Boolean false 是否将日历面板添加到 document.body中
elementId String   日历ID
firstDayOfWeek Number 0 每周第1天,0表示星期天,1表示星期一,其它依次类推

组件的所有属性值

props: {
 value: {
  type: [String, Date]
 },
 format: {
  default: 'yyyy-MM-dd'
 },
 firstDayOfWeek: {
  // sunday
  default: 0
 },
 disabledDaysOfWeek: {
  type: Array,
  default () {
  return []
  }
 },
 width: {
  type: String,
  default: '200px'
 },
 clearButton: {
  type: Boolean,
  default: false
 },
 inputClasses: {
  type: String,
  default: ''
 },
 lang: {
  type: String,
  default: navigator.language
 },
 placeholder: {
  type: String
 },
 hasInput: {
  type: Boolean,
  default: true
 },
 pane: {
  type: Number,
  default: 1
 },
 borderWidth: {
  type: Number,
  default: 2
 },
 onDayClick: {
  type: Function,
  default () {}
 },
 changePane: {
  type: Function,
  default () {}
 },
 specialDays: {
  type: Object,
  default () {
  return {}
  }
 },
 rangeBus: {
  type: Function,
  default () {
  // return new Vue()
  }
 },
 rangeStatus: {
  type: Number,
  default: 0
 },
 onDrawDate: {
  type: Function,
  default () {}
 },
 maxDate: {
  type: String
 },
 minDate: {
  type: String
 },
 showDateOnly: {
  type: Boolean,
  default: false
 },
 transfer: {
  type: Boolean,
  default: false
 },
 elementId: [String]
 }

五,源码

以下是我改过后的源码:

https://github.com/alaxgit/Vue2-Calendar

六,直接引用JS

如果你喜欢直接引用JS和CSS,不喜欢用webpack编译啥的,可以直接下载编译好的文件:

https://github.com/alaxgit/Vue2-Calendar/blob/master/lib/calendar.min.js

https://github.com/alaxgit/Vue2-Calendar/blob/master/lib/calendar.min.css

总结

以上所述是小编给大家介绍的基于Vue2-Calendar改进的日历组件(含中文使用说明),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
vue下的@change事件的实现
Oct 25 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 #Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 #Javascript
js中async函数结合promise的小案例浅析
Apr 14 #Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 #Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 #Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
You might like
数据库相关问题
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
深入分析JSON编码格式提交表单数据
2015/06/25 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
判断网页编码的方法python版
2016/08/12 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
大学中国梦演讲稿
2014/04/23 职场文书
法制教育演讲稿
2014/09/10 职场文书
资料员岗位职责范本
2015/04/13 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js