微信小程序日历弹框组件

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

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

calendar.json

  1. { 
  2.   "usingComponents": { },
  3.   "disableScroll": true
  4. }

calendar.wxml

  1. <view class="titleDate">
  2.   <button class="cu-btn" bindtap="lastMonth">
  3.     <text class="cuIcon-back">＜</text>
  4.   </button>
  5.   {
  6.    {currentYear}} - {
  7.    {currentMonth+1}}
  8.   <button class="cu-btn" bindtap="nextMonth">
  9.     <text class="cuIcon-right">＞</text>
  10.   </button>
  11. </view>
  13. <view class="title">
  14.   <view wx:for='{
  15.    {weeks}}' wx:key='index'>{
  16.    {item}}</view>
  17. </view>
  18. <view class="calender  {
  19.    {anmation? 'animation-slide-skew':''}}">
  20.   <view wx:for='{
  21.    {monthNum+week}}' class="cal-body {
  22.    {index-week+1==currentDay&&nowMonth==currentMonth&&nowYear==currentYear?'now':''}}" wx:key='index' data-day="{
  23.    {index-week+1}}" bindtap="choseDay">
  24.     <view class="{
  25.    {index-week+1>0?'cal-text ':''}} {
  26.    {choseDay==index-week+1&&currentMonth==choseMonth?'chose':''}}">{
  27.    {index-week+1 >0?index-week+1:''}}</view>
  28.   </view>
  29. </view>
  30. <view>
  31. </view>
  32. <picker-view wx:if='{
  33.    {datePick}}' class="picker" mask-class='mask' indicator-class='indicator' bindchange="bindChange">
  34.   <picker-view-column class='column'>
  35.     <view wx:for='{
  36.    {24}}' style="line-height:50rpx;" wx:key='index'>{
  37.    {index
  38.       <10? '0'+index:index}}</view>
  39.   </picker-view-column>
  40.   <picker-view-column class='column'>
  41.     <view wx:for='{
  42.    {60}}' style="line-height:50rpx;" wx:key='imdex'>{
  43.    {index
  44.       <10? '0'+index:index}}</view>
  45.   </picker-view-column>
  46. </picker-view>
  48. <view>您选择的是：{
  49.    {choseDate}} {
  50.    {choseHours}} : {
  51.    {choseMin}}</view>
  53. <view>
  54.   <view class="toToday" bindtap="initDay">今</view>
  55. </view>

calendar.wxss

  1. /* pages/sigle/calendar/calendar.wxss */
  3. page { 
  4.   background: #fff;
  5. }
  7. .datePick { 
  8.   margin-top: 20rpx;
  9. }
  11. .indicator { 
  12.   height: 50rpx;
  13.   width: 80%;
  14.   margin-left: 10%;
  15.   border-radius: 10rpx;
  16. }
  18. .column { 
  19.   text-align: center;
  20.   color: cornflowerblue;
  21.   font-weight: bold;
  22.   font-size: 34rpx;
  23. }
  25. .picker { 
  26.   height: 150rpx;
  27.   width: 80%;
  28.   margin: 0 auto;
  29. }
  31. .text { 
  32.   width: 150px;
  33.   height: 60px;
  34.   margin-left: 20px;
  35. }
  37. .move { 
  38.   width: 100px;
  39.   height: 60px;
  40.   position: absolute;
  41.   right: 0;
  42.   transform: translateX(100px);
  43.   background: rgb(245, 51, 93);
  44. }
  46. .calender { 
  47.   margin: 0 auto;
  48.   width: 90%;
  49.   height: 600rpx;
  50.   color: rgb(68, 68, 68);
  51.   display: grid;
  52.   grid-template-columns: repeat(7, 1fr);
  53.   grid-column-gap: 20rpx;
  54.   transition: height 1s;
  55. }
  57. .titleDate { 
  58.   display: flex;
  59.   justify-content: center;
  60.   align-items: center;
  61.   font-size: 32rpx;
  62.   font-weight: bold;
  63. }
  65. .cu-btn { 
  66.   display: flex;
  67.   justify-content: center;
  68.   align-items: center;
  69.   width: 60rpx !important;
  70. }
  72. .title { 
  73.   border-bottom: 4rpx solid cornflowerblue;
  74.   font-size: 30rpx;
  75.   font-weight: bold;
  76.   height: 80rpx;
  77.   line-height: 80rpx;
  78.   text-align: center;
  79.   margin: 0 auto;
  80.   width: 90%;
  81.   color: rgb(93, 98, 136);
  82.   display: grid;
  83.   grid-template-columns: repeat(7, 1fr);
  84.   grid-column-gap: 20rpx;
  85. }
  87. .cal-body { 
  88.   width: 80rpx;
  89.   margin-top: 20rpx;
  90.   font-size: 30rpx;
  91.   font-weight: bold;
  92.   height: 80rpx;
  93.   text-align: center;
  94. }
  96. .cal-body .cal-text { 
  97.   line-height: 80rpx;
  98.   border-bottom: 1rpx dashed rgba(100, 148, 237, 0.747);
  99. }
  101. .now { 
  102.   background: cornflowerblue;
  103.   color: #fff;
  104.   font-size: 32rpx;
  105.   font-weight: bold;
  106.   border-radius: 50%;
  107.   box-shadow: 2rpx 2rpx 12rpx cornflowerblue;
  108. }
  110. .chose { 
  111.   background: rgb(20, 20, 20);
  112.   color: #fff;
  113.   font-size: 32rpx;
  114.   font-weight: bold;
  115.   border-radius: 14rpx;
  116.   box-shadow: 2rpx 2rpx 12rpx rgb(122, 122, 122);
  117. }
  119. .toToday { 
  120.   text-align: center;
  121.   width: 100rpx;
  122.   height: 100rpx;
  123.   border-radius: 50%;
  124.   line-height: 100rpx;
  125.   position: absolute;
  126.   bottom: 30rpx;
  127.   font-weight: bold;
  128.   right: 30rpx;
  129.   color: #fff;
  130.   background: cornflowerblue;
  131.   box-shadow: 2rpx 2rpx 20rpx rgba(123, 154, 211, 0.808);
  132. }

calendar.js

  1. const weeks = ['日', '一', '二', '三', '四', '五', '六']
  3. function getWeelDay(year, month, day) { 
  4.   return new Date(year)
  5. }
  6. Page({ 
  8.   /** * 页面的初始数据 */
  9.   data: { 
  10.     weeks: ['日', '一', '二', '三', '四', '五', '六'],
  11.     datePick: false
  12.   },
  13.   start_(e) { 
  14.     this.setData({ 
  15.       Start: e.touches[0].pageX,
  16.       animation: false
  17.     })
  18.     console.log('start', this.data.Start)
  19.   },
  20.   move_(e) { 
  21.     let x = e.touches[0].pageX - this.data.Start
  22.     if (x > -100 && x < 0) { 
  23.       this.setData({ 
  24.         movex: x
  25.       })
  26.     }
  28.     this.setData({ 
  29.       show: e.touches[0].pageX - this.data.Start > 0 ? 'hide' : 'show'
  30.     })
  31.     console.log('move', x)
  32.   },
  33.   end_(e) { 
  34.     if (this.data.show == 'show') { 
  35.       this.setData({ 
  36.         movex: -100,
  37.         animation: true
  38.       })
  39.     } else { 
  40.       this.setData({ 
  41.         movex: 0,
  42.         animation: true
  43.       })
  44.     }
  45.     // this.setData({ 
  46.     // ListTouchDirection: null
  47.     // })
  48.   },
  49.   /** * 生命周期函数--监听页面加载 */
  50.   onLoad: function(options) { 
  51.     // let date = new Date()
  52.     // let currentYear = date.getFullYear(),
  53.     // currentMonth = date.getMonth(),
  54.     // currentDay = date.getDate()
  56.     // let monthNum = new Date(currentYear,currentMonth+1,0).getDate()
  57.     // let week = new Date(currentYear, currentMonth, 1).getDay()
  58.     // this.setData({ 
  59.     // currentYear:currentYear,
  60.     // currentMonth:currentMonth,
  61.     // currentDay:currentDay,
  62.     // monthNum: monthNum,
  63.     // week: week,
  64.     // nowYear: currentYear,
  65.     // nowMonth: currentMonth,
  66.     // nowDay: currentDay
  67.     // })
  68.     this.initDay()
  70.   },
  71.   initDay() { 
  72.     //获取当前选择的年月日
  73.     let date = new Date()
  74.     let currentYear = date.getFullYear(),
  75.       currentMonth = date.getMonth(),
  76.       currentDay = date.getDate()
  78.     //获取当年，当月的天数 getDate()，此时month+1
  79.     let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
  80.     //获取该月1号是周几，注意此时month不加1
  81.     let week = new Date(currentYear, currentMonth, 1).getDay()
  82.     this.setData({ 
  83.       currentYear: currentYear,
  84.       currentMonth: currentMonth,
  85.       currentDay: currentDay,
  86.       monthNum: monthNum,
  87.       week: week,
  88.       nowYear: currentYear, //这里的now代表今天对应的日期，存在data中，点击回到今天时再从data中取出
  89.       nowMonth: currentMonth,
  90.       nowDay: currentDay
  91.     })
  93.   },
  94.   /** * 生命周期函数--监听页面初次渲染完成 */
  95.   onReady: function() { 
  97.   },
  98.   bindChange(e) { 
  99.     console.log(e.detail.value[0], e.detail.value[1])
  100.     this.setData({ 
  101.       choseHours: e.detail.value[0],
  102.       choseMin: e.detail.value[1]
  103.     })
  104.   },
  105.   choseDay(e) { 
  106.     let index_ = e.currentTarget.dataset.day
  107.     if (index_ > 0) { 
  108.       if (this.data.choseMonth == this.data.currentMonth && this.data.choseDay == index_) { 
  109.         this.setData({ 
  110.           choseDay: '',
  111.           choseYear: '',
  112.           choseMonth: '',
  113.           choseDay: '',
  114.           datePick: false
  115.         })
  116.       } else { 
  117.         console.log(this.data.currentYear, this.data.currentMonth, index_)
  118.         let choseDate = this.data.currentYear + '' + this.data.currentMonth + '' + index_
  119.         this.setData({ 
  120.           choseDate: choseDate,
  121.           choseYear: this.data.currentYear,
  122.           choseMonth: this.data.currentMonth,
  123.           choseDay: index_,
  124.           datePick: true
  125.         })
  126.       }
  128.     }
  130.   },
  131.   lastMonth() { 
  132.     this.setData({ 
  133.       anmation: true
  134.     })
  135.     //计算余数，除以12之后的余数便是要减的月份数
  136.     let Remainder = this.data.currentMonth % 12;
  137.     if (this.data.currentMonth < 1) { 
  138.       //parseInt(this.data.currentMonth / 12) 计算整数，得到的值就是要减的年
  139.       //如果当前选择的月份是负数，需要减整数后再-1
  140.       var currentYear = this.data.currentYear - 1 - parseInt(this.data.currentMonth / 12)
  141.       var currentMonth = 12 - Math.abs(Remainder) - 1
  142.     } else { 
  143.       var currentYear = this.data.currentYear + parseInt(this.data.currentMonth / 12)
  144.       var currentMonth = Remainder - 1
  145.     }
  146.     let monthInt = parseInt(this.data.currentMonth / 12)
  148.     // let currentDay = this.data.currentDay;
  149.     let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
  150.     let week = new Date(currentYear, currentMonth, 1).getDay()
  151.     this.setData({ 
  152.       currentYear: currentYear,
  153.       currentMonth: currentMonth,
  154.       monthNum: monthNum,
  155.       week: week
  156.     })
  157.     setTimeout(() => { 
  158.       this.setData({ 
  159.         anmation: false
  160.       })
  161.     }, 1000)
  162.     console.log(currentYear, currentMonth, week, monthNum)
  163.   },
  164.   nextMonth() { 
  165.     this.setData({ 
  166.       anmation: true
  167.     })
  168.     let Remainder = (this.data.currentMonth + 1) % 12;
  169.     if (Remainder < 0) { 
  170.       var currentYear = this.data.currentYear - 1 - parseInt(Remainder / 12)
  171.       var currentMonth = 12 - Math.abs(Remainder)
  172.     } else { 
  173.       console.log(Remainder)
  174.       var currentYear = Remainder == 0 ? this.data.currentYear + 1 : this.data.currentYear + parseInt(Remainder / 12)
  175.       var currentMonth = Remainder
  176.     }
  177.     let monthInt = parseInt(this.data.currentMonth / 12)
  179.     // let currentDay = this.data.currentDay;
  180.     let monthNum = new Date(currentYear, currentMonth + 1, 0).getDate()
  181.     let week = new Date(currentYear, currentMonth, 1).getDay()
  182.     this.setData({ 
  183.       currentYear: currentYear,
  184.       currentMonth: currentMonth,
  185.       monthNum: monthNum,
  186.       week: week
  187.     })
  188.     setTimeout(() => { 
  189.       this.setData({ 
  190.         anmation: false
  191.       })
  192.     }, 1000)
  193.     console.log(currentYear, currentMonth, week, monthNum)
  194.   }
  195. })

发表评论

表情：
评论列表 （有 0 条评论，432人围观）

还没有评论，来说两句吧...

相关阅读