欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序实现带年月选取效果的日历

程序员文章站 2023-08-02 21:35:18
本文实例为大家分享了小程序日历展示的具体代码,供大家参考,具体内容如下 根据前面的日历,又遇到到个好玩的日历需求,分享给大家   这是个带年月左右选取的日历...

本文实例为大家分享了小程序日历展示的具体代码,供大家参考,具体内容如下

根据前面的日历,又遇到到个好玩的日历需求,分享给大家

 小程序实现带年月选取效果的日历

这是个带年月左右选取的日历展示!并且当天的对应日会被高亮显示!下面看下实现代码!

1.wxml代码结构

<view class='wrap'> 
  <view> 
    <view class='date-show'> 
      <view class='lt-arrow' bindtap='lastmonth'> 
        <image src='../images/nextmonth.png' mode='aspectfit'></image> 
      </view> 
      {{year}}年{{month}}月 
      <view class='rt-arrow' bindtap='nextmonth'> 
        <image src='../images/nextmonth.png' mode='aspectfit'></image> 
      </view> 
    </view> 
  </view> 
  <view class='header'> 
    <view wx:for='{{date}}' class='{{(index == todayindex) && istodayweek ? "weekmark" : ""}}'>{{item}}<view></view></view> 
  </view> 
  <view class='date-box'> 
    <view wx:for='{{datearr}}' class='{{istoday == item.istoday ? "nowday" : ""}}' data-date='{{item.istoday}}'>      
      <view class='date-head'> 
        <view>{{item.datenum}}</view> 
      </view> 
      <view class='date-weight'>{{item.weight}}</view> 
    </view> 
  </view> 
</view> 

2.wxss代码结构

.date-show{ 
  position: relative; 
  width: 250rpx; 
  font-family: pingfang-sc-regular; 
  font-size: 40rpx; 
  color: #282828; 
  text-align: center; 
  margin: 59rpx auto 10rpx; 
} 
.lt-arrow,.rt-arrow{ 
  position: absolute; 
  top: 1rpx; 
  width: 60rpx; 
  height: 60rpx; 
} 
.lt-arrow image,.rt-arrow image{ 
  width: 14rpx; 
  height: 26rpx; 
} 
.lt-arrow{ 
  left: -110rpx; 
  transform: rotate(180deg); 
} 
.rt-arrow{ 
  right: -100rpx; 
} 
.header{ 
  font-size: 0; 
  padding: 0 24rpx; 
} 
.header>view{ 
  display: inline-block; 
  width: 14.285%; 
  color: #333; 
  font-size: 30rpx; 
  text-align: center; 
  border-bottom: 1px solid #d0d0d0; 
  padding: 39rpx 0; 
} 
.weekmark{ 
  position: relative; 
} 
.weekmark view{ 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  border-bottom: 1px solid #22a7f6; 
} 
.date-box{ 
  font-size: 0; 
  padding: 10rpx 0; 
} 
.date-box>view{ 
  position: relative; 
  display: inline-block; 
  width: 14.285%; 
  color: #020202; 
  font-size: 40rpx; 
  text-align: center; 
  vertical-align: middle; 
  margin: 15rpx 0; 
} 
.date-head{ 
  height: 60rpx; 
  line-height: 60rpx; 
  font-size: 26rpx; 
} 
.nowday .date-head{ 
  width: 60rpx; 
  border-radius: 50%; 
  text-align: center; 
  color: #fff; 
  background-color: #22a7f6; 
  margin: 0 auto; 
} 
.date-weight{ 
  font-size: 22rpx; 
  padding: 15rpx 0; 
} 
.nowday .date-weight{ 
  color: #22a7f6; 
} 
.one{ 
  position: absolute; 
  bottom: 0; 
  right: 5rpx; 
  width: 20rpx; 
  height: 20rpx; 
  border-radius: 50%; 
  background-color: red; 
} 
.two{ 
  position: absolute; 
  bottom: 30rpx; 
  right: 5rpx; 
  width: 20rpx; 
  height: 20rpx; 
  border-radius: 50%; 
  background-color: blue; 
} 

index.js 

//index.js 
//获取应用实例 
const app = getapp() 
 
page({ 
 data: { 
    year: 0, 
    month: 0, 
    date: ['日', '一', '二', '三', '四', '五', '六'], 
    datearr: [], 
    istoday: 0, 
    istodayweek: false, 
    todayindex: 0 
  }, 
 onload: function () { 
    let now = new date(); 
    let year = now.getfullyear(); 
    let month = now.getmonth() + 1; 
    this.dateinit(); 
    this.setdata({ 
      year: year, 
      month: month, 
      istoday: '' + year + month + now.getdate() 
    }) 
 }, 
 dateinit: function(setyear,setmonth){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let datearr = [];            //需要遍历的日历数组数据 
    let arrlen = 0;             //datearr的数组长度 
    let now = setyear ? new date(setyear,setmonth) : new date(); 
    let year = setyear || now.getfullyear(); 
    let nextyear = 0; 
    let month = setmonth || now.getmonth();         //没有+1方便后面计算当月总天数 
    let nextmonth = (month + 1) > 11 ? 1 : (month + 1);    
    let startweek = new date( year+','+(month + 1)+','+1).getday();             //目标月1号对应的星期 
    let daynums = new date(year,nextmonth,0).getdate();       //获取目标月有多少天 
    let obj = {};     
    let num = 0; 
     
    if(month + 1 > 11){ 
      nextyear = year + 1; 
      daynums = new date(nextyear,nextmonth,0).getdate(); 
    } 
    arrlen = startweek + daynums; 
    for(let i = 0; i < arrlen; i++){ 
      if(i >= startweek){ 
        num = i - startweek + 1; 
        obj = { 
          istoday: '' + year + (month + 1) + num, 
          datenum: num, 
          weight: 5 
        } 
      }else{ 
        obj = {}; 
      } 
      datearr[i] = obj; 
    } 
    this.setdata({ 
      datearr: datearr 
    }) 
 
    let nowdate = new date(); 
    let nowyear = nowdate.getfullyear(); 
    let nowmonth = nowdate.getmonth() + 1; 
    let nowweek = nowdate.getday(); 
    let getyear = setyear || nowyear; 
    let getmonth = setmonth >= 0 ? (setmonth + 1) : nowmonth; 
 
    if (nowyear == getyear && nowmonth == getmonth){ 
      this.setdata({ 
        istodayweek: true, 
        todayindex: nowweek 
      }) 
    }else{ 
      this.setdata({ 
        istodayweek: false, 
        todayindex: -1 
      }) 
    } 
  }, 
  lastmonth: function(){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; 
    let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; 
    this.setdata({ 
      year: year, 
      month: (month + 1) 
    }) 
    this.dateinit(year,month); 
  }, 
  nextmonth: function(){ 
    //全部时间的月份都是按0~11基准,显示月份才+1 
    let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; 
    let month = this.data.month > 11 ? 0 : this.data.month; 
    this.setdata({ 
      year: year, 
      month: (month + 1) 
    }) 
    this.dateinit(year, month); 
  } 
}) 

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