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

    js文件

    'use strict';
    let choose_year = null,
      choose_month = null;
    const conf = {
      data: {
        hasEmptyGrid: false,
        showPicker: false
      },
      onLoad() {
        const date = new Date();
        const cur_year = date.getFullYear();
        const cur_month = date.getMonth() + 1;
        const weeks_ch = [ '日', '一', '二', '三', '四', '五', '六' ];
        this.calculateEmptyGrids(cur_year, cur_month);
        this.calculateDays(cur_year, cur_month);
        this.setData({
          cur_year,
          cur_month,
          weeks_ch
        });
      },
      getThisMonthDays(year, month) {
        return new Date(year, month, 0).getDate();
     
      },
      getFirstDayOfWeek(year, month) {
    console.log(new Date(Date.UTC(year, month - 1, 1)).getDay())
        return new Date(Date.UTC(year, month - 1, 1)).getDay();
      },
      calculateEmptyGrids(year, month) {
        const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
        let empytGrids = [];
        if (firstDayOfWeek > 0) {
          for (let i = 0; i < firstDayOfWeek; i++) {
            empytGrids.push(i);
          }
          this.setData({
            hasEmptyGrid: true,
            empytGrids
          });
        } else {
          this.setData({
            hasEmptyGrid: false,
            empytGrids: []
          });
        }
      },
      calculateDays(year, month) {
        let days = [];

        const thisMonthDays = this.getThisMonthDays(year, month);

        for (let i = 1; i <= thisMonthDays; i++) {
          days.push({
            day: i,
            choosed: false
          });
        }

        this.setData({
          days
        });
      },
    // 顶部年月选择控制函数
      handleCalendar(e) {
        const handle = e.currentTarget.dataset.handle;
        const cur_year = this.data.cur_year;
        const cur_month = this.data.cur_month;
        if (handle === 'prev') {
          let newMonth = cur_month - 1;
          let newYear = cur_year;
          if (newMonth < 1) {
            newYear = cur_year - 1;
            newMonth = 12;
          }

          this.calculateDays(newYear, newMonth);
          this.calculateEmptyGrids(newYear, newMonth);

          this.setData({
            cur_year: newYear,
            cur_month: newMonth
          });

        } else {
          let newMonth = cur_month + 1;
          let newYear = cur_year;
          if (newMonth > 12) {
            newYear = cur_year + 1;
            newMonth = 1;
          }

          this.calculateDays(newYear, newMonth);
          this.calculateEmptyGrids(newYear, newMonth);

          this.setData({
            cur_year: newYear,
            cur_month: newMonth
          });
        }
      },
      tapDayItem(e) {
        const idx = e.currentTarget.dataset.idx;
        const days = this.data.days;
        days[ idx ].choosed = !days[ idx ].choosed;
        this.setData({
          days,
        });
      },
      chooseYearAndMonth() {
        const cur_year = this.data.cur_year;
        const cur_month = this.data.cur_month;
        let picker_year = [],
          picker_month = [];
        for (let i = 1900; i <= 2100; i++) {
          picker_year.push(i);
        }
        for (let i = 1; i <= 12; i++) {
          picker_month.push(i);
        }
        const idx_year = picker_year.indexOf(cur_year);
        const idx_month = picker_month.indexOf(cur_month);
        this.setData({
          picker_value: [ idx_year, idx_month ],
          picker_year,
          picker_month,
          showPicker: true,
        });
      },
      pickerChange(e) {
        const val = e.detail.value;
        choose_year = this.data.picker_year[val[0]];
        choose_month = this.data.picker_month[val[1]];
      },
      tapPickerBtn(e) {
        const type = e.currentTarget.dataset.type;
        const o = {
          showPicker: false,
        };
        if (type === 'confirm') {
          o.cur_year = choose_year;
          o.cur_month = choose_month;
          this.calculateEmptyGrids(choose_year, choose_month);
          this.calculateDays(choose_year, choose_month);
        }
        
        this.setData(o);
      },
      onShareAppMessage() {
        return {
          title: '小程序日历',
          desc: '还是新鲜的日历哟',
          path: 'pages/index/index'
        };
      }
    };

    Page(conf);
     
     
     
     
    //--------------------------------------------------------------------------------------------------------------------------------------------------------------------

    wxml

    <view class="flex box box-tb box-align-center">
    <view class="calendar pink-color box box-tb">
    <view class="top-handle fs28 box box-lr box-align-center box-pack-center">
    <view class="prev box box-rl" bindtap="handleCalendar" data-handle="prev">
    <view class="prev-handle box box-lr box-align-center box-pack-center">《</view>
    </view>
    <view bindtap="chooseYearAndMonth" class="date-area box box-lr box-align-center box-pack-center">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
    <view class="next box box-lr" bindtap="handleCalendar" data-handle="next">
    <view class="next-handle box box-lr box-align-center box-pack-center">》</view>
    </view>
    </view>
    <view class="weeks box box-lr box-pack-center box-align-center">
    <view class="flex week fs28" wx:for="{{weeks_ch}}" wx:key="week{{index}}" data-idx="{{index}}">{{item}}</view>
    </view>
    <view class="days box box-lr box-wrap">
    <view wx:if="{{hasEmptyGrid}}" class="grid white-color box box-align-center box-pack-center" wx:for="{{empytGrids}}" wx:key="day{{index}}" data-idx="{{index}}">
    </view>
    <view class="grid white-color box box-align-center box-pack-center" wx:for="{{days}}" wx:key="days{{index}}" data-idx="{{index}}" bindtap="tapDayItem">
    <view class="day {{item.choosed ? 'border-radius pink-bg' : ''}} box box-align-center box-pack-center">{{item.day}}</view>
    </view>
    </view>
    </view>
    </view>

    <view wx:if="{{showPicker}}" class="box box-tb">
      <view class="picker-btns box box-lr box-pack-between box-align-center">
        <view class="picker-btn picker-cancel" data-type="cancel" bindtap="tapPickerBtn">取消</view>
        <view class="picker-btn picker-confirm" data-type="confirm" bindtap="tapPickerBtn">确定</view>
      </view>
      <picker-view class="flex" indicator-style="height: 50px;" style=" 100%; height: 150px;" value="{{picker_value}}" bindchange="pickerChange">
        <picker-view-column>
          <view class="picker-view" wx:key="years{{index}}" wx:for="{{picker_year}}" style="line-height: 50px">{{item}}年</view>
        </picker-view-column>
        <picker-view-column>
          <view class="picker-view" wx:key="months{{index}}" wx:for="{{picker_month}}" style="line-height: 50px">{{item}}月</view>
        </picker-view-column>
      </picker-view>
    </view>
     
     
     
    //--------------------------------------------------------------------------------------------------------------------------------------------------------------------

    wxss

    /* pages/calendar/calendar.wxss */
    .top-handle {
    height: 80rpx;
    }
    .prev {
    text-align: right;
    height: 80rpx;
    }
    .next {
    height: 80rpx;
    }
    .prev-handle {
    80rpx;
    height: 100%;
    }
    .next-handle {
    80rpx;
    height: 100%;
    }
    .date-area {
    50%;
    height: 80rpx;
    text-align: center;
    }
    .weeks {
    height: 50rpx;
    line-height: 50rpx;
    opacity: 0.5
    }
    .week {
    text-align: center;
    }
    .days {
    height: 500rpx;
    }
    .grid {
    107.1428571429rpx;
    }
    .day {
    60rpx;
    height: 60rpx;
    color: #88d2ac;
    font-size: 26rpx;
    font-weight: 200;
    }
    .border-radius {
    border-radius: 50%;
    position: relative;
    left: 0;
    top: 0;
    color: #fff;
    }
    .pink-bg {
    ">#ff629a;
    }
    .purple-bg {
    ">#b8b8f1;
    }

    .right-triangle::after {
    content: "";
    display: block;
    0;
    height: 0;
    border: 15rpx solid transparent;
    border-left-color: #ff629a;
    position: absolute;
    right: -22rpx;
    top: 18rpx;
    }
    .left-triangle::before {
    content: "";
    display: block;
    0;
    height: 0;
    border: 15rpx solid transparent;
    border-right-color: #ff629a;
    position: absolute;
    left: -22rpx;
    top: 18rpx;
    }
    .tips {
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    }
    .types {
    ">#ffedf4;
    height: 50rpx;
    }
    .type-dot {
    25rpx;
    height: 25rpx;
    border-radius: 50%;
    margin-right: 10rpx;
    }
    .type-dot-ymq {
    color:#FF7CA0;
    ">#FF7CA0;
    }
    .type-dot-ycq {
    color: rgb(255, 200, 202);
    ">rgb(255, 200, 202);
    }
    .type-dot-aqq {
    color: rgb(118, 191, 92);
    ">rgb(118, 191, 92);
    }
    .type-dot-yyq {
    color: #FF7CA0;
    ">#FF7CA0;
    }
    .type-dot-plr {
    color: rgb(211, 189, 215);
    ">rgb(211, 189, 215);
    }
    .types-desc {
    padding: 0 20rpx;
    }
    .type-name {
    margin-top: 50rpx;
    margin-bottom: 30rpx;
    }
    .type-desc {
    padding: 0 35rpx;
    line-height: 38rpx;
    }
    .explain {
    border-top: 1px solid #eee;
    90%;
    margin: 20rpx 5% 20rpx 5%;
    padding: 20rpx 0;
    }
    .explain-title {
    font-weight: bold;
    margin-bottom: 15rpx;
    }
    .explain-item {
    padding: 8rpx 20rpx;
    color: #fff;
    }
    .left-border-radius {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
    }
    .right-border-radius {
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    }
    .picker-btns {
      height: 120rpx;
      line-height: 120rpx;
      border-bottom: 1rpx solid #FF7CA0;
    }
    .picker-confirm {
      margin-right: 50rpx;
    }
    .picker-cancel {
      margin-left: 50rpx;
    }
    .picker-view {
      color:#FF7CA0;
      text-align: center;
    }
  • 相关阅读:
    normalize.css 中文版
    [转载]自适应高度输入框
    【转载】H5页面列表的无线滚动加载(前端分页)
    CSS设置table下tbody滚动条与thead对齐的方法
    [转载]Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
    wordpress 目录、数据结构和解析原理
    WordPress基础知识:条件判断标签及用法大全
    主题如何添加tag标签页面
    WordPress进阶:[2]不同页面显示不同的侧边栏
    WordPress进阶:[1]怎样用tag标签做导航菜单
  • 原文地址:https://www.cnblogs.com/dianzan/p/7908670.html
Copyright © 2011-2022 走看看