1.3.3 • Published 2 years ago

vue-better-calendar-update v1.3.3

Weekly downloads
-
License
-
Repository
github
Last release
2 years ago

vue-better-calendar

A calendar component for vuejs.

npm downloads

关于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/vue@2.5.16/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-better-calendar@1.3.0/dist/vue-better-calendar.js"></script>
  <div id="app">
    <vue-better-calendar></vue-better-calendar>
  </div>
  <script>
    new Vue({
      el: '#app'
    })
  </script>

参数

名称类型默认值说明
modeStringmulti日期选择模式,支持四个有效值:multi 多选,range 范围选择,sign 签到,single 单选
notSignInOtherMonthsTxtString不能在本月外进行签到签到时点击本月外日期时的文本提示
notSignInOtherDaysTxtString签到只能在当天进行签到时点击本月内非当天日期时的文本提示
alreadySignTxtString本日已经进行过签到签到时点击已经签过到的日期时的文本提示
signSuccessTxtString签到成功签到成功时的文本提示
limitBeginDateArray[]限制可被选择的日期范围的开始日期,传参格式:2018, 3, 1
limitEndDateArray[]限制可被选择的日期范围的结束日期,传参格式:2018, 4, 24
signedDatesArray[]已经签过到的日期,仅在签到模式下有用,传参格式:'2018-03-01', '2018-03-05'
isZeroPadBooleantrue点选日期后返回结果中的日期月份和天数不够两位数时是否补0
disabledDatesArray[]设置不可被选择的日期,传参格式:[2018, 3, 1, 2018, 3, 24]
showLunarBooleantrue是否显示农历
showDisableDateBooleantrue是否显示不可被选择的日期
weeksArray'日', '一', '二', '三', '四', '五', '六'星期栏文本
monthsArray'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'月份栏文本
eventsObject{'2018-3-22': {className: 'price',title: '¥232',styles: {}}}为某个日期添加单独的事件和文本
ctlColorString#5e7a88切换按钮颜色
labelTodayObject{showLabelToday: true,label: '今天'}当天是否将显示的日期换成文本
disableBeforeTodayBooleanfalse是否将今天以前的日期全部设为不可用
disableAfterTodayBooleanfalse是否将今天以后的日期全部设为不可用
hideHeaderBooleanfalse隐藏顶部日期月份选择显示
hideWeeksBooleanfalse隐藏星期显示

支持事件

名称回调参数说明
select-yearyear选择年份时触发
select-monthmonth, year选择月份时触发
select-range-dateselectedDates范围选择模式下,选中想选择的日期范围时触发,返回选中的所有日期
select-multi-dateselectedMultiDays多选模式下,选中想选择的日期时触发,返回选中的所有日期
click-disable-datedate,mode点击不可选择日期时触发,返回所点击的日期和当前日期模式
select-sign-date{status,msg,signedDates}点击日期签到时触发,status表示签到是否成功,msg为此次签到是否成功的提示语,signedDates为目前已经签过到的所有日期
select-single-datedate单选模式下,选则日期时触发,返回所选择的日期
reset-select-range-date无回调参数范围选择模式下,重置选择的日期时触发
nextmonth, year切换到下一个月或者下一年时触发
prevmonth, year切换到上一个月或者上一年时触发

支持方法

名称描述
setToday选中当天日期
resetRangDate范围选择模式下,重置已选择的日期范围
sign单独通过按钮点击进行签到,会触发select-sign-date事件