Vue自定义可以选择日期区间段的日历插件

本文实例为大家分享了vue自定义日历插件的具体代码，供大家参考，具体内容如下

由于网上的插件没有符合项目的需求决定自己实现

图示如下:

默认选择今天的日期时间段

1.默认状态(默认选择当前日期的时间段(蓝底背景色代表选中时间段),

2.当前日期之前的时间不可以选择(禁用了点击事件))

3.当日历上的操作的年份月份小于当前时间的年份月份时禁止点击上一月的按钮

em; &.active { background: #037ef5; color: #fff; } &.noclick { pointer-events: none; background: #ccc; } &.kong { background: #fff; pointer-events: none; } } .mobile-top { display: flex; flex-wrap: nowrap; background: #fff; padding: 0.1rem 0; .sel-time { text-align: center; width: 50%; // border-bottom: solid 2px #2a81e8; .start-date{ color: #b1b1b1; margin-top: 0.05rem; } } .unsel-time { text-align: center; width: 50%; .end-date{ color: #b1b1b1; margin-top: 0.05rem; } } } .title{ width: 100%; height: 40px; background-color: #60a7e8; display: flex; flex-wrap: nowrap; text-align: center; color: #fff; font-weight: bold; line-height: 40px; .btn{ width: 1.2rem; &.noclick{ pointer-events: none; background: #ccc; } } .text{ flex: 1; } } .head{ display: flex; flex-wrap: nowrap; text-align: center; height: 40px; line-height: 40px; .days{ flex: 1; } } .bottombtn { height: 40px; width: 100%; display: flex; flex-wrap: nowrap; button { flex: 1; } .sure-btn { background: #037ef5; color: #fff; } }</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。