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;
    }
    

    效果如下图

  • 相关阅读:
    Leetcode95. Unique Binary Search Trees II不同的二叉搜索树2
    Leetcode134. Gas Station加油站
    Leetcode152. Maximum Product Subarray乘积的最大子序列
    C#扩展方法
    Lua语言入门
    Docker命令
    SpringBoot-配置文件属性注入-3种方式
    从零开始学Linux系统(五)用户管理和权限管理
    MyCat学习笔记
    kafka-zk-安装测试初体验
  • 原文地址:https://www.cnblogs.com/1328497946TS/p/14557784.html
Copyright © 2011-2022 走看看