微信小程序日历弹框组件

不念不忘少年蓝@ 2022-12-09 15:58 382阅读 0赞

> 参考文章：https://blogai.cn/posts/46

### calendar.json ###

{ 
      "usingComponents": { },
      "disableScroll": true
    }

### calendar.wxml ###

<view class="titleDate">
      <button class="cu-btn" bindtap="lastMonth">
        <text class="cuIcon-back">＜</text>
      </button>
      {
       {currentYear}} - {
       {currentMonth+1}}
      <button class="cu-btn" bindtap="nextMonth">
        <text class="cuIcon-right">＞</text>
      </button>
    </view>
    
    <view class="title">
      <view wx:for='{
       {weeks}}' wx:key='index'>{
       {item}}</view>
    </view>
    <view class="calender  {
       {anmation? 'animation-slide-skew':''}}">
      <view wx:for='{
       {monthNum+week}}' class="cal-body {
       {index-week+1==currentDay&&nowMonth==currentMonth&&nowYear==currentYear?'now':''}}" wx:key='index' data-day="{
       {index-week+1}}" bindtap="choseDay">
        <view class="{
       {index-week+1>0?'cal-text ':''}} {
       {choseDay==index-week+1&&currentMonth==choseMonth?'chose':''}}">{
       {index-week+1 >0?index-week+1:''}}</view>
      </view>
    </view>
    <view>
    </view>
    <picker-view wx:if='{
       {datePick}}' class="picker" mask-class='mask' indicator-class='indicator' bindchange="bindChange">
      <picker-view-column class='column'>
        <view wx:for='{
       {24}}' style="line-height:50rpx;" wx:key='index'>{
       {index
          <10? '0'+index:index}}</view>
      </picker-view-column>
      <picker-view-column class='column'>
        <view wx:for='{
       {60}}' style="line-height:50rpx;" wx:key='imdex'>{
       {index
          <10? '0'+index:index}}</view>
      </picker-view-column>
    </picker-view>
    
    <view>您选择的是：{
       {choseDate}} {
       {choseHours}} : {
       {choseMin}}</view>
    
    <view>
      <view class="toToday" bindtap="initDay">今</view>
    </view>

### calendar.wxss ###

/* pages/sigle/calendar/calendar.wxss */
    
    page { 
      background: #fff;
    }
    
    .datePick { 
      margin-top: 20rpx;
    }
    
    .indicator { 
      height: 50rpx;
      width: 80%;
      margin-left: 10%;
      border-radius: 10rpx;
    }
    
    .column { 
      text-align: center;
      color: cornflowerblue;
      font-weight: bold;
      font-size: 34rpx;
    }
    
    .picker { 
      height: 150rpx;
      width: 80%;
      margin: 0 auto;
    }
    
    .text { 
      width: 150px;
      height: 60px;
      margin-left: 20px;
    }
    
    .move { 
      width: 100px;
      height: 60px;
      position: absolute;
      right: 0;
      transform: translateX(100px);
      background: rgb(245, 51, 93);
    }
    
    .calender { 
      margin: 0 auto;
      width: 90%;
      height: 600rpx;
      color: rgb(68, 68, 68);
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-column-gap: 20rpx;
      transition: height 1s;
    }
    
    .titleDate { 
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
    }
    
    .cu-btn { 
      display: flex;
      justify-content: center;
      align-items: center;
      width: 60rpx !important;
    }
    
    .title { 
      border-bottom: 4rpx solid cornflowerblue;
      font-size: 30rpx;
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      margin: 0 auto;
      width: 90%;
      color: rgb(93, 98, 136);
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      grid-column-gap: 20rpx;
    }
    
    .cal-body { 
      width: 80rpx;
      margin-top: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
      height: 80rpx;
      text-align: center;
    }
    
    .cal-body .cal-text { 
      line-height: 80rpx;
      border-bottom: 1rpx dashed rgba(100, 148, 237, 0.747);
    }
    
    .now { 
      background: cornflowerblue;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 50%;
      box-shadow: 2rpx 2rpx 12rpx cornflowerblue;
    }
    
    .chose { 
      background: rgb(20, 20, 20);
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
      border-radius: 14rpx;
      box-shadow: 2rpx 2rpx 12rpx rgb(122, 122, 122);
    }
    
    .toToday { 
      text-align: center;
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      line-height: 100rpx;
      position: absolute;
      bottom: 30rpx;
      font-weight: bold;
      right: 30rpx;
      color: #fff;
      background: cornflowerblue;
      box-shadow: 2rpx 2rpx 20rpx rgba(123, 154, 211, 0.808);
    }

### calendar.js ###