复制粘贴向小程序日历

拿走复制完事。有对应的事件和选中效果。最近比较颓废懒得写了

const weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六",]
Page({
  data: {
    dateDes: "",
    date: "",
    daysOfNextMonth: [],
    daysOfPrevMonth: [],
    daysOfThisMonth: [],
    currentDate: ""
  },
  onLoad: function () {let date = new Date();
    this.setDate(date);
    this.setCurrentDate(date);
  },
  setDate(date) {let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let nowDate = year + "年" + month + "月";
    this.setData({dateDes: nowDate});
    this.setData({date: date});
    let lastDay = new Date(year, month, 0).getDate();
    let firstDayOfWeek = new Date(year, month - 1, 1).getDay();
    if (firstDayOfWeek === 0) {firstDayOfWeek = 7;}
    let lastDayOfWeek = new Date(year, month - 1, lastDay).getDay();
    if (lastDay === 0) {lastDay = 7;}

    // 设置上个月的空时间
    let emptyDays = firstDayOfWeek - 1;
    let daysOfPrevMonth = [];
    for (let i = 0; i < emptyDays; i++) {let dayOfPrevMonth = new Date(year, month - 1, -i).getDate();
      let time = new Date(year, month - 1, -i).getTime();
      daysOfPrevMonth.unshift({
        text: dayOfPrevMonth,
        time: time
      });
    }
    this.setData({daysOfPrevMonth: daysOfPrevMonth});

    // 设置这个月的时间
    let daysOfThisMonth = [];
    let currentDate = new Date();
    for (let i = 1; i <= lastDay; i++) {let time = new Date(year, month - 1, i).getTime();
      let checked = false;
      if (currentDate.getFullYear() === year && currentDate.getMonth() + 1 === month && currentDate.getDate() === i) {checked = true;}
      daysOfThisMonth.push({
        text: i,
        time: time,
        checked: checked
      });
    }
    this.setData({daysOfThisMonth: daysOfThisMonth});

    // 设置下个月的时间
    let daysOfNextMonth = [];
    let j = 1;
    for (let i = lastDayOfWeek; i < 7; i++) {let time = new Date(year, month, j).getTime();
      daysOfNextMonth.push({
        text: j,
        time: time
      });
      j++;
    }
    this.setData({daysOfNextMonth: daysOfNextMonth});
  },
  setPrevMonth() {let date = new Date(this.data.date);
    let year = date.getFullYear();
    let month = date.getMonth() - 1;
    let day = date.getDate();
    let prevMonth = new Date(year, month, day);
    this.setDate(prevMonth);
  },
  setNextMonth() {let date = new Date(this.data.date);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let nextMonth = new Date(year, month, day);
    this.setDate(nextMonth);
  },
  setChecked(res) {
    let index = res.currentTarget.dataset.index;
    let array = this.data.daysOfThisMonth;
    array.map(item => {item.checked = false;});
    array[index].checked = true;
    this.setData({daysOfThisMonth: array});
    let time = res.currentTarget.dataset.time;
    let date = new Date(time);
    this.setCurrentDate(date);
  },
  setCurrentDate(date){let month = date.getMonth() + 1;
    let day = date.getDate();
    let week = date.getDay();
    let weekDes = weeks[week];
    let currentDate = month + "月" + day + "日" + weekDes;
    this.setData({currentDate:currentDate});
  }
})

/**index.wxss**/
page{
    min-height: 100%;
    background-color: #efeff4;   
}
.title{
    font-size: 20px;
    font-weight: bold;
    color: #000;
}
.f-l{float: left;}
.f-r{float: right;}
.calendar{
    background-color: #fff;
    margin-top:10px;
    padding:10px;
}
.calendar-header{text-align: center;}
.calendar-header image{
    height:10px;
    width:10px;
    margin-top:7px;
}
.weeks,
.days{
    padding: 2%;
    margin-top:5px;
}
.week,
.day{
    display: inline-block;
    width: 14%;
    text-align: center;
    font-size: 12px;
    color:#b9b9b9;
}
.day{
    margin-bottom:5px;
    color:#000;
}
.perv-month,
.next-month{color:#b7b7b7;}
.day-inner{    
    line-height: 40px;
    width: 40px;
    height:40px;
    margin: 0 auto;
    /* background-color: #369; */
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    border:1px solid #fff;
    position: relative;
}
.bad{color:#b50000;}
.good{color: #83e1b5;}
.checked{
    border-radius: 50%;
    border:1px solid #cbafd8;
}
.split-line{
    border-top:1px solid #ceced1;
    margin-top:5px;
}
.current-date{
    font-size: 12px;
    color:#575f65;
    margin-top: 20px;
    padding: 0 10px;
    margin-bottom: 10px;
}
.probability{
    padding: 10px;
    background-color: #fff;
    font-size: 16px;
    color:#000;
    font-weight: bold;
}
.icon{
    height: 24px;
    width:24px;
    vertical-align: middle;
    margin-right: 5px;
}
.remind{
    position: absolute;
    left:50%;
    margin-left: -2.5px;
    height:5px;
    width: 5px;
    border-radius: 50%;
    background-color: #83e1b5;
    bottom:3px;
}

<view>
    <view class="calendar">
        <view class="calendar-header">
            <image class="f-l" src="/imgs/arrow-left.png" bindtap="setPrevMonth" />
            <text class="title">{{dateDes}}</text>
            <image class="f-r" src="/imgs/arrow-right.png" bindtap="setNextMonth" />
        </view>
        <view class="weeks">
            <view class="week"> 周一 </view>
            <view class="week"> 周二 </view>
            <view class="week"> 周三 </view>
            <view class="week"> 周四 </view>
            <view class="week"> 周五 </view>
            <view class="week"> 周六 </view>
            <view class="week"> 周日 </view>
        </view>
        <view class="split-line"></view>
        <view class="days">
            <view class="day" wx:for="{{daysOfPrevMonth}}">
                <view class="day-inner perv-month">
                    <text>{{item.text}}</text>
                </view>
            </view>
            <view class="day" wx:for="{{daysOfThisMonth}}" data-index="{{index}}" data-time="{{item.time}}" bindtap="setChecked">
                <view class="{{item.checked === true?'day-inner checked':'day-inner'}}">
                    <text wx:if="{{item.text < 10}}" class="good">{{item.text}}</text>
                    <text wx:elif="{{item.text > 20}}" class="bad">{{item.text}}</text>
                    <text wx:else>{{item.text}}</text>

                    <view wx:if="{{item.text === 11}}" class="remind"></view>
                </view>
            </view>
            <view class="day" wx:for="{{daysOfNextMonth}}">
                <view class="day-inner next-month">
                    <text>{{item.text}}</text>
                </view>
            </view>
        </view>
    </view>
    <view>
        <view class="current-date">{{currentDate}}</view>        
    </view>
</view>