zoukankan      html  css  js  c++  java
  • 微信小程序日历

    index.wxml

    <view class="calendar">
        <view class="calendar-weeks">
          <view>日</view>
          <view>一</view>
          <view>二</view>
          <view>三</view>
          <view>四</view>
          <view>五</view>
          <view>六</view>
        </view>
        <view class="calendar-days">
          <view wx:for="{{ days }}" class="{{ item.currmonth ? 'currmonth' : '' }}" id="{{ item.today ? 'today' : ''}}">{{ item.day }}</view>
        </view>
    </view>
    

    index.js

    Page({
      data: {
        days: []
      },
      onLoad: function(){
        let date = new Date()
        let curYear = date.getFullYear()
        let curMonth = date.getMonth()
        //获取当前月份天数
        let curDays = new Date(curYear, curMonth + 1, 0).getDate()
        //获取上个月天数
        let preDays = new Date(curYear, curMonth, 0).getDate()
        //这个月第一天星期几
        let monWeek = new Date(curYear, curMonth, 1).getDay()
        //这个月最后一天星期几
        let lastWeek = new Date(curYear, curMonth + 1, 0).getDay()
        let toDay = date.getDate()
        let allDays = []
        for(let i = 0; i < monWeek; i++, preDays--){
          let obj = {currmonth: false, day: preDays}
          allDays.unshift(obj)
        }
        for(let i = 1; i <= curDays; i++){
          let obj = {currmonth: true, day: i}
          if(i == toDay){
            obj['today'] = true
          }
          allDays.push(obj)
        }
        for(let i = 1; i < 7 - lastWeek; i++){
          let obj = {currmonth: false, day: i}
          allDays.push(obj)
        }
        this.setData({days: allDays})
      }
    });
    

    index.wxss

    .calendar {
      display: flex;
      flex-flow: column nowrap;
    }
    .calendar-weeks {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
    .calendar-weeks view {
      box-sizing: border-box;
       14.28%;
      padding: 5%;
      display: flex;
      justify-content: center;
    }
    .calendar-days {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
    }
    .calendar-days view {
      box-sizing: border-box;
       14.28%;
      padding: 5%;
      display: flex;
      justify-content: center;
    }
    .calendar-days view:not(.currmonth) {
      color: #ccc;
    }
    #today {
      color: #AFEEEE;
    }
    

    效果如下图

  • 相关阅读:
    致命错误 RC1004: 文件查找结束时有无法预知的错误(vc++)
    demo713总结
    图标,鼠标,字符串,音频..
    不同的色深条件(8、16、24、32),像素绘制方式
    SQL 保留两位小数的实现方式
    MVC4的REmote缺陷
    MVC4安装过程
    mongodb 的几种驱动
    iis7 web配置问题及解决办法
    Fast Binary File Reading with C#
  • 原文地址:https://www.cnblogs.com/1328497946TS/p/14557784.html
Copyright © 2011-2022 走看看