V2calendar-picker NPM

基于vue2实现的日历组件，支持单选和区间选择（支持自定义样式）

Install

$ npm install v2calendar-picker

Usage

// 基本使用
// main.js 引入并use();
import CalendarPicker from 'v2calendar-picker'
import 'v2calendar-picker/v2calendar-picker.css'
Vue.use(CalendarPicker)

// app.vue
<template>
    <div class="calendar">
        <CalendarPicker
            v-model="dates"
            :format="format"
            :disabledDates="disabledDates"
            @change="valueChange">
        </CalendarPicker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dates: "2021/10/03",
            format: "YYYY-MM-DD",
            disabledDates: ["2020/12/04", "2020/12/07"]
        };
    },
    methods: {
        valueChange(value, date) {
            console.log(value, date, "valueChange");
        }
    }
};
</script>

// 样式相关
// APP.vue
<template>
  <div id="app">
    <div class="calendar">
      <CalendarPicker
        activeClassName="item-active"
        dateClassName="date-item"
        :interpositonClass="interpositonClass"
      ></CalendarPicker>
    </div>
  </div>
</template>

<script>
export default { 
  methods: {
    /** 当日期为2023/8/25时显示 item-active2样式 */
    interpositonClass(val) {
      if (`${val.year}/${val.month}/${val.date}` === "2023/8/25") {
        /** 只有返回类名才有效果 */
        return "item-active2";
      }
    },
  },
}
</script>

// 可以直接覆盖组件内部样式
<style lang="less">
.calendar {
  width: 500px;
  .date-item {
    border-radius: 12px;
  }
  .item-active {
    color: #fff;
    background-color: rgb(111, 111, 111);
  }
  .item-active2 {
    background-color: rgb(140, 96, 96);
  }
}
</style>

Props

参数	说明	类型	可选值	默认值
value	v-model的值，单选为单个字符串日期"2023/8/04"，区间为日期字符串数组"2023/8/04", "2023/12/07"	String / String[]	-	单选时为当前日期，区间选择没有默认值
format	返回结果格式化字符串，以dayjs格式为准	String	-	-
range	是否区间选择	Boolean	-	false
showCount	是否显示区间选择天数统计	Boolean	-	true
disabledDates	不可选中日期列表，eg："2020/12/04", "2020-12-07"，单选有效	Array	-	[]
dateClassName	日期单个ClassName	String	-	-
activeClassName	日期选中ClassName	String	-	-
interpositonClass	自定义某个日期样式，interpositonClass(val)。val为日期对象，需返回一个class类名字符串，使用请看案列。	Function(val)：string {}	-	-