Wqcalendar NPM

my-components

components setup

npm i wqcalendar -S

components use

<template>
  <div id="app">
        <WCalendar class="calendar"
                          :Month="monthValue"
                          :is-multiple-choice="false"
                          :pointMap="pointMap"
                          :restrictDate="restrictDate"
                          @chooseDays="chooseDays">
           <template v-slot:left>
               <el-date-picker
                        v-model="monthValue"
                        type="month"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        placeholder="选择月份">
               </el-date-picker>
           </template>
        </WCalendar>
  </div>
</template>
<script>
import Vue from 'vue'
import WCalendar from 'wqcalendar'
import 'wqcalendar/dist/wqcalendar.css'
Vue.use(WCalendar)
export default {
  data() {
      /**
     * 获取当天时间
     * @returns {string}
     */
    function getCurDay(num = 0) {
      var datetime = new Date();
      var year = datetime.getFullYear();
      var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
      let day = datetime.getDate()
      if ((day + num) > 0) {
        day = (day + num) < 10 ? "0" + (datetime.getDate() + num) : datetime.getDate() + num;
      } else {
        day = (day - num) < 10 ? "0" + (datetime.getDate() - num) : datetime.getDate() - num;
      }
      return `${year}-${month}-${day}`
    }
    return {
      monthValue:'',
      pointMap: {[new Date(getCurDay()).getTime()]: true},
      restrictDate:{4:[getCurDay(),getCurDay(+10)]},
    }
  },
  methods: {
    chooseDays(list){
      console.log(list)
    }
  },
}
</script>

Attributes

参数	说明	类型	可选值	默认值
Month	自定义选择年月	string	-	当天的年月，格式：2022-01
isMultipleChoice	选择日期是单选或范围连续多选	Boolean	true/false	true：多选
isShowClear	是否显示清空按钮	Boolean	true/false	true：显示
pointMap	日期中需要标记的数据:数据格式为map { new Date(2022-02-11).getTime():true}: 用年月日的时间戳为key	Object	{ new Date(2022-02-11).getTime():true}	--
restrictDate	是否禁止选择以前的日期默认为空表示没有限制注：如果只有数字则默认时间是当天时间	Object	{1:'2022-02-11'}表示2022-02-11以前的日期不能选择；1：表示小于该时间的禁止选择，必填;{2:'2022-02-11'}表示2022-02-11以后的日期不能选择；2：表示大于该时间的禁止选择，必填;{3:'2022-02-11','2022-03-11'}表示2022-02-11到2022-03-11之间的日期可以选择；3：表示两个时间内的时间可以选择，必填;{4:'2022-02-11','2022-03-11'}表示2022-02-11到2022-03-11之外的日期可以选择；4：表示两个时间之外的可以选择，必填	--