vue-better-calendar
vue-better-calendar
A calendar component for vuejs.
关于vue-better-calendar
vue-better-calendar是一个基于vue的日期选择插件,它提供了四种日期选择模式(范围选择,多选,签到,单选)
在线示例
安装
使用npm安装
npm install --save vue-better-calendar
ES6方式导入
import VueBetterCalendar from 'vue-better-calendar'
Vue.use(VueBetterCalendar)
在组件中引入
<vue-better-calendar></vue-better-calendar>
直接连入页面使用
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-better-calendar.js"></script>
<div id="app">
<vue-better-calendar></vue-better-calendar>
</div>
<script>
new Vue({
el: '#app'
})
</script>
参数
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
mode | String | multi | 日期选择模式,支持四个有效值:multi 多选,range 范围选择,sign 签到,single 单选 |
notSignInOtherMonthsTxt | String | 不能在本月外进行签到 | 签到时点击本月外日期时的文本提示 |
notSignInOtherDaysTxt | String | 签到只能在当天进行 | 签到时点击本月内非当天日期时的文本提示 |
alreadySignTxt | String | 本日已经进行过签到 | 签到时点击已经签过到的日期时的文本提示 |
signSuccessTxt | String | 签到成功 | 签到成功时的文本提示 |
limitBeginDate | Array | [] | 限制可被选择的日期范围的开始日期,传参格式:[2018, 3, 1] |
limitEndDate | Array | [] | 限制可被选择的日期范围的结束日期,传参格式:[2018, 4, 24] |
signedDates | Array | [] | 已经签过到的日期,仅在签到模式下有用,传参格式:['2018-03-01', '2018-03-05'] |
isZeroPad | Boolean | true | 点选日期后返回结果中的日期月份和天数不够两位数时是否补0 |
disabledDates | Array | [] | 设置不可被选择的日期,传参格式:[[2018, 3, 1], [2018, 3, 24]] |
showLunar | Boolean | true | 是否显示农历 |
showDisableDate | Boolean | true | 是否显示不可被选择的日期 |
weeks | Array | ['日', '一', '二', '三', '四', '五', '六'] | 星期栏文本 |
months | Array | ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] | 月份栏文本 |
events | Object | {'2018-3-22': {className: 'price',title: '¥232',styles: {}}} | 为某个日期添加单独的事件和文本 |
ctlColor | String | #5e7a88 | 切换按钮颜色 |
labelToday | Object | {showLabelToday: true,label: '今天'} | 当天是否将显示的日期换成文本 |
disableBeforeToday | Boolean | false | 是否将今天以前的日期全部设为不可用 |
disableAfterToday | Boolean | false | 是否将今天以后的日期全部设为不可用 |
hideHeader | Boolean | false | 隐藏顶部日期月份选择显示 |
hideWeeks | Boolean | false | 隐藏星期显示 |
支持事件
名称 | 回调参数 | 说明 |
---|---|---|
select-year | year | 选择年份时触发 |
select-month | month, year | 选择月份时触发 |
select-range-date | selectedDates | 范围选择模式下,选中想选择的日期范围时触发,返回选中的所有日期 |
select-multi-date | selectedMultiDays | 多选模式下,选中想选择的日期时触发,返回选中的所有日期 |
click-disable-date | date,mode | 点击不可选择日期时触发,返回所点击的日期和当前日期模式 |
select-sign-date | {status,msg,signedDates} | 点击日期签到时触发,status表示签到是否成功,msg为此次签到是否成功的提示语,signedDates为目前已经签过到的所有日期 |
select-single-date | date | 单选模式下,选则日期时触发,返回所选择的日期 |
reset-select-range-date | 无回调参数 | 范围选择模式下,重置选择的日期时触发 |
next | month, year | 切换到下一个月或者下一年时触发 |
prev | month, year | 切换到上一个月或者上一年时触发 |
支持方法
名称 | 描述 |
---|---|
setToday | 选中当天日期 |
resetRangDate | 范围选择模式下,重置已选择的日期范围 |
sign | 单独通过按钮点击进行签到,会触发select-sign-date事件 |
Dependencies
autoprefixer: ^7.2.1babel-core: ^6.26.0babel-eslint: ^8.0.3babel-loader: ^7.1.2babel-plugin-add-module-exports: ^0.2.1babel-plugin-istanbul: ^4.1.5babel-plugin-transform-es2015-modules-umd: ^6.24.1babel-plugin-transform-runtime: ^6.23.0babel-polyfill: ^6.26.0babel-preset-env: ^1.6.1babel-preset-stage-2: ^6.24.1babel-register: ^6.26.0connect-history-api-fallback: ^1.5.0copy-webpack-plugin: ^4.2.3cross-env: ^5.1.1css-loader: ^0.28.7eslint: ^4.12.1eslint-config-standard: ^10.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.9.0eslint-plugin-html: ^4.0.1eslint-plugin-import: ^2.8.0eslint-plugin-node: ^5.2.1eslint-plugin-promise: ^3.6.0eslint-plugin-standard: ^3.0.1eventsource-polyfill: ^0.9.6express: ^4.16.2extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.5friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^2.30.1http-proxy-middleware: ^0.17.4inject-loader: ^3.0.1opn: ^5.1.0optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.3.0postcss-loader: ^2.0.9shelljs: ^0.7.8style-loader: ^0.19.0stylus: ^0.54.5stylus-loader: ^3.0.1url-loader: ^0.6.2vue: ^2.5.13vue-loader: ^13.5.0vue-router: ^3.0.1vue-style-loader: ^3.0.3vue-template-compiler: ^2.5.13webpack: ^3.10.0webpack-bundle-analyzer: ^2.9.1webpack-dev-middleware: ^1.12.2webpack-hot-middleware: ^2.21.0webpack-merge: ^4.1.1