微信小程序 日历区间选择组件

有项目需求需要一个日历区间的选择器，发现vant 或者其他的日历区间选择组件不是很满足需求，于是自己改造一个；

效果如下

上wxml代码

<view wx:if="{{ isShow }}" class="component {{ up }}">
    <view class="header">
        <image src="/static/images/home/Groupcalendar-close.png" bindtap="calendarClose" class="header-close" mode="" />
        <view bindtap="handlePrevMonthClick">{{ huiche }}</view>
        <view>{{year}}年{{month}}月</view>
        <view bindtap="handleNextMonthClick">></view>
    </view>
    <view>
        <view class="week">日</view>
        <view class="week">一</view>
        <view class="week">二</view>
        <view class="week">三</view>
        <view class="week">四</view>
        <view class="week">五</view>
        <view class="week">六</view>
    </view>
    <view class="daybox">
        <block wx:for="{{dayList}}" wx:key="index">
            <view wx:if="{{item.day}}" class="day {{dataList.length === 2 && item.date < dataList[1] && item.date > dataList[0]  ? 'to-checked': ''}} {{item.date == dataList[0]? 'day-checked': ''}} {{item.date == dataList[1]? 'day-two-checked': ''}}  {{item.bg ? 'day-bg' : ''}}" data-day="{{item.day}}"  data-month="{{item.month}}" data-year="{{item.year}}" data-date="{{item.date}}" bindtap="handleDayClick">
                <view>{{item.day}}</view>
                <view class="point" wx:if="{{item.point}}"></view>
            </view>
            <view wx:elif="{{index < 10}}" class="day"></view>
        </block>
    </view>
    <view>
        <button class="bottom calendar-bottom" bindtap="toGoHome">选好了</button>
    </view>
</view>

 wxss

.component {
    background: #fff;
    margin: 45rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 0rpx 20rpx 3rpx #ccc;
    border-radius: 20rpx;
    padding-bottom: 20rpx;
}

.left-set {
    -webkit-animation: scale-up-tl 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-tl 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

.right-set {
    -webkit-animation: scale-up-tr 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-tr 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up-tr {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 100% 0%;
        transform-origin: 100% 0%;
    }
}

@-webkit-keyframes scale-up-tl {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }
}

@keyframes scale-up-tl {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }
}

.header {
    display: flex;
    justify-content: left;
    padding: 20rpx;
    position: relative;
}

.header view {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.85);
    min-width: 80rpx;
    text-align: center;
}

.header-close {
    width: 41rpx;
    height: 41rpx;
    position: absolute;
    right: 23rpx;
    top: 18rpx;
}

.header view:nth-child(2n-1) {
    font-size: 35rpx;
}

.week {
    display: inline-block;
    width: 95rpx;
    line-height: 2;
    color: rgba(0, 0, 0, 0.45);
    font-size: 28rpx;
    text-align: center;
    background-color: var(--btColor);
    color: var(--themeColor);
}

.daybox {
    display: flex;
    flex-wrap: wrap;
}

.day {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
    line-height: 2.5;
    color: #666;
}

/* .day:nth-child(7n),
.day:nth-child(7n) {
    color: #ff9b80;
}
.day:nth-child() {
    color: #ff9b80;
} */



.to-checked {
    background-color: var(--btShallowColor);
    border-radius: 0%;
}

.day-checked {
    border: 4rpx solid var(--btColor) !important;
    border-radius: 50% 0 0 50%;
    background-color: var(--btColor);
    color: #fff;
}

.day-two-checked {
    border: 4rpx solid var(--btColor) !important;
    border-radius: 0% 50% 50% 0%;
    background-color: var(--btColor);
    color: #fff;
}


.day-bg {
    background: #ffe9e4 !important;
}

.point {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #ff876d;
    margin: 0 auto;
    margin-top: 5rpx;
}

.calendar-bottom {
    width: 336rpx;
    height: 78rpx;
    text-align: center;
    line-height: 78rpx;
    font-size: 32rpx;
}