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

一,前言

我是刚学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时不显示

效果图

三,使用示例

1.常规使用,单日历

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.常规使用,双月日历

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.双日历联动,通常用在开始和结束时间的选择上,结束时间不能早于开始时间

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

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改进的日历组件(含中文使用说明),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • 基于Vue实现支持按周切换的日历

    基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div> <!-- 星期 --> <ul class=&q

  • Vue 组件(component)教程之实现精美的日历方法示例

    组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用不同的组件来拼接页面.这种开发模式使得前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 最近应公司的要求,需要开发一个精美的日历组件(IOS , 安卓, PC 的IE9+都能运行),写完后想把它分享出来,希望大家批评. 先来个截图 代码已经分享到 https://github.com/zhangKun

  • Vue.js创建Calendar日历效果

    使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,

  • Vue实现日历小插件

    本文实例为大家分享了Vue实现日历小插件的具体代码,供大家参考,具体内容如下 先看下效果图吧, 如下 源码可见于我的github 实现关键点: 1.组件的复用以及父子组件传值 很明显每年每个月的月历样式(数据不一样)是一致的,那么自然而然思路就是把每个月作为一个公用组件进行复用十二次,这样就避免了多次重复的代码.每个组件不一样的地方在于年份和月份,而这两个数据我们可以由父组件向子组件进行传值来告诉子组件.关键代码如下: <template> <div class="wrap&q

  • Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示

    之前写了一篇周和月日历,但感觉体验不是太好,所以有重新做了一遍,加上了动画.还可以自定义显示日历里的内容. 现在贴出项目源码,我现在是放在CSDN里的下载资源,这里哦 现在我上传带了GitHub上了,可以去这里下载哦,如果觉得好的话希望能给个star,谢谢支持 1.总共分为两个组件(父组件calendar.vue) <template> <div class="calendar-box"> <ul class="calendar-head&quo

  • vue实现简单的日历效果

    最近在项目中遇到了一个需求,在vue中创建一个组件,这个组件显示的是当前的日期,以及在当前的日需要处理的事项,处理的事项的信息会以后端的接口的形式返回. 需求确认后,搭建了一下,在这里记录了一下,现在是简单的实现了这个需求,但是肯定的是后期需要进行修改. vue就不多说了,在vue中使用的是原生JS 效果图(基本没有样式,很low) 现在实现的都是最初级的版本,代码里面的容错,还有一些性能上的处理,并没有书写. 不多说,上代码: 首先是vue的html结构,很简单,里面添加了一些其他时间形式的显

  • vue实现日历备忘录功能

    用vue写了个日历备忘录的功能,省略了备忘录的增删改查功能. 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>备忘录</title> <style type="text/css"> #box{ width: 469px; } /*日历*/ *{ padding:

  • 亲自动手实现vue日历控件

    之前项目中有用到日历控件,当时由于时间问题,是在网上找到一个demo,然后二次开发的,从那时就想着自己写一个日历控件.这篇文章说明日历数据的处理,去除月份天数判断以及是否闰年判断. 设计(以最常用的按月份的日历) 日历其实大家都很熟悉,一切的设计都是从功能出发,这是根本.日历的功能分为两大块. 日历头部:当前年份/月份. 日历主体:当前月份的具体的日期信息. 日历主体的行数:现在我们看到的日历基本上为6行,因为一个月最多为31天,假设当前月的第一天为上一月最后一周的最后一天.如果是五行数据的话则

随机推荐