vue2-calendar

基于vue2.js 和 bootstrap.css 样式的日历控件。

• 本人于2019.03.29在原 v2.2.4 版基础上作了优化，因此改版本号为 v2.2.5。

• 改动内容：

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

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

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

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

• 这不仅是一个Vue组件，更是一个多页应用项目

• Boostrap风格

• 多语言支持

安装（需要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" >
<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]
  }

## Credits

Inspired by vue-strap datepicker component.

For detailed explanation on how things work, checkout the guide and docs for vue-loader.