基于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 相关文章推荐
JQuery 风格的HTML文本转义
Jul 01 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
JavaScript实现滚动加载更多
Dec 27 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
php注册登录系统简化版
2020/12/28 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
javascript Array 数组常用方法
2015/04/05 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
2019/09/18 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python 上下文管理器使用方法小结
2017/10/10 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
在python中pandas的series合并方法
2018/11/12 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
对python函数签名的方法详解
2019/01/22 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
一组SQL面试题
2016/02/15 面试题
港湾网络笔试题
2014/04/19 面试题
法学毕业生自我鉴定
2014/01/31 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
信息员培训方案
2014/06/12 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
护士求职自荐信
2015/03/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
入党介绍人意见范文
2015/06/01 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
Python Django获取URL中的数据详解
2021/11/01 Python