⾃⼰捣⿎⽇历选择组件（类似el-calendar）可以单击选则不同
⽇期，也可范围选择⽇期
需求：
左边⽇历，选择⽇历中的⽇期，右边把选择的⽇期显⽰到表格中去
每个⽇期显⽰⼀⾏数据，左侧⽇期点击选中再次点击取消，取消右边表格数据也跟着取消
⽇历中的⽇期可以进⾏多个选则，这⾥不进⾏范围选则⽽是进⾏跨天和跨⽉进⾏选择
分析：
1. ⽇历好像element-ui库中有el-calendar，赶紧看⼀下有没有这样的类似的事件，看了⽂档发现，只有单点选择，且选中后不能取消
2. 想了想看看有没有类似的库，发现有，但是项⽬中已经够⼤了再加⼀些第三⽅库不太好，于是考虑⾃⼰封装⼀个⽇历组件，可单选取
消，间隔多选，范围选择，这个通过配置就可以，⽅便以后使⽤
效果如下
1、范围选择
2、单点选择
3、插槽添加选择⽉份
4、禁⽌选择指定⽇期以前的时间 :restrictDate="{1:['2022-02-11']}"
5、禁⽌选择以后的⽇期 :restrictDate="{2:['2022-02-11']}"
6、 禁⽌选择某个范围的⽇期 :restrictDate="{3:['2022-02-11','2022-03-11']}"
由于时间充⾜，就把该组件打包发布到了npm上了，使⽤⽅式如下：
1.  npm i wqcalendar -S  包使⽤教程
2.
直接使⽤没有打包的代码代码如下
注：下⾯代码可能会与npm 打包后的代码不同，不过⼤部分相同，如想看npm包代码只能先把包下载下来，在node_modules中wqcalendar 中的src⽂件加就可以了，代码暂未发布到GitHub上，如有问题或者想要完善，只能在这⾥提出 ，请各位⼤佬见凉
html代码
<template>
<div class="calender-container">
<div class="top">
<div class="chooseMonth">
<el-date-picker
v-model="monthValue"
type="month"
format="yyyy-MM"
value-format="yyyy-MM"
:picker-options="pickerOptions"
placeholder="选择⽉份" @change="changeMonth">
</el-date-picker>
</div>
<div class="top_date">
{{ year }}年{{ month > 9 ? month : `0${month}` }}⽉
</div>
<div class="btn_wrap">
<el-tooltip class="item" effect="dark" content="上⼀⽉" placement="top">
<span @click="handleShowLastMonth"><i class="el-icon-d-arrow-left"></i></span>
</el-tooltip>
<span @click="handleShowToday">今天</span>
<el-tooltip class="item" effect="dark" content="下⼀⽉" placement="top">
<span @click="handleShowNextMonth"><i class="el-icon-d-arrow-right"></i></span>
</el-tooltip>
<span @click="handleClear">清除</span>
</div>
</div>
<div class="date_wrap">
<ul class="week">
<li>⽇</li>
<li>⼀</li>
<li>⼆</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
<ul class="day">
<li v-for="(item,index) in days"
:class="{'isCurMonth':item.isNextMonth||item.isLastMonth,'isCurToday':item.isCurToday,'isActive':item.isActive}"            :key="index"
@click="handleChooseTime(item)">
{{ item.day }}
</li>
</ul>
</div>
</div>
</template>
js代码
⼯具类 import MyTools from"../utils/MyTools";
<script>
import MyTools from "../utils/MyTools";
const curYear = new Date().getFullYear();
export default {
name: 'calender',
props: {
//是否是多选box sizing
isMultipleChoice: {
type: Boolean,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。