微信小程序 日历

misswellCategories 学习笔记

JS

const app = getApp()
const util = require('../../utils/util.js')
const date = require('../../utils/date.js')

Page({
  data: {
    year: 0,
    month: 0,
    date: ['日', '一', '二', '三', '四', '五', '六'],
    dateArr: [],
    isToday: 0,
    isTodayWeek: false,
    todayIndex: 0,
    isClick:null
  },
  onLoad: function () {
    var now = new Date()
    console.log(now)
    if (now.length>0){
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      console.log('有 now')
    } else {
      var thedate = date.theDate()
      var year = date.getFullYear(thedate)
      var month = date.getMonth(thedate)
      console.log('没有 now')
    }
    this.start(year, month)
    this.isToday()
    console.log('onLoad done')

  },
  isToday:function(){
    let now = new Date();
    var theDay = '' + now.getFullYear() + util.formatNumber(now.getMonth() + 1) + util.formatNumber(now.getDate())
    this.setData({
      isToday: theDay,
      isClick: theDay
    })
  },
  start: function (year, month){
    month = Number(month)
    this.dateInit(year, month-1);
    this.setData({
      year: year,
      month: month,
    })
  },
  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;
    console.log('startWeek')
    console.log(startWeek)
    for (let i = 0; i < arrLen; i++) {
      if (i >= startWeek) {
        num = i - startWeek + 1;
        obj = {
          isToday: '' + year + util.formatNumber(month + 1) + util.formatNumber(num),
          dateNum: num,
          weight: 6
        }
      } else {
        obj = {};
      }
      console.log(obj)
      dateArr[i] = obj;
    }
    console.log(dateArr)
    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.start(year, Number(month) + 1)
  },
  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.start(year, Number(month) + 1)
  },
  dateClick:function(res){
    console.log(res)
    var clickDay = res.currentTarget.dataset.date
    console.log(clickDay)
    this.setData({
      isClick:clickDay
    })
  }
})

WXML

<view class='wrap'>
  <view>
    <view class='date-show'>
      <view class='lt-arrow' bindtap='lastMonth'>
        <image src='/resource/cal/next.png' mode='aspectFit'></image>
      </view>
      {{year}}年{{month}}月
      <view class='rt-arrow' bindtap='nextMonth'>
        <image src='/resource/cal/next.png' mode='aspectFit'></image>
      </view>
    </view>
  </view>
  <view class='header'>
    <view wx:for='{{date}}' wx:key='{{key}}' class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}}
      <view></view>
    </view>
  </view>
  <view class='date-box'>
    <view wx:for='{{dateArr}}' wx:key='{{key}}' class='{{isToday == item.isToday ? "nowDay" : ""}} {{isClick!=null && isClick == item.isToday ? "clickDay":""}}' data-date='{{item.isToday}}' bindtap='dateClick'>
      <view class='date-head'>
        <view>{{item.dateNum}}</view>
      </view>
      <view class='date-weight'>
        <block wx:if="{{item.weight}}">
          <view class='checkTwo'></view>
        </block>
      </view>
    </view>
  </view>
</view>

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: 26rpx;
	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: 10rpx 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: 10rpx 0 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;
  opacity:0.5;
	margin: 0 auto;
}

.clickDay .date-head{
	width: 60rpx;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	background-color: #22A7F6;
  opacity:1;
	margin: 0 auto;
}
.date-weight{
	font-size: 22rpx;
	padding: 15rpx 0 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.nowDay .date-weight{
	color: #22A7F6;
}
.clickDay .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;
}
.checkTwo{
  width:10rpx;
  height:10rpx;
  border-radius:50%;
  background-color: blue;
}

util.js

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}

module.exports = {
  formatTime: formatTime,
  formatNumber: formatNumber
}

date.js

const app = getApp()
const util = require('util.js')
const dateAdd = function (startDate, days) {
  startDate = new Date(startDate);
  startDate = +startDate + days * 1000 * 60 * 60 * 24;
  startDate = new Date(startDate);
  var nextStartDate = startDate.getFullYear() + "-" + util.formatNumber((startDate.getMonth() + 1)) + "-" + util.formatNumber(startDate.getDate());
  return nextStartDate;
}

const theDate = function (num = 0){
  var thisDate = new Date();
  var myDate = new Date(thisDate.getTime() + 24 * 60 * 60 * 1000 * num)
  var theDate = myDate.getFullYear() + '-' + util.formatNumber((myDate.getMonth() + 1)) + '-' + util.formatNumber(myDate.getDate())
  return theDate
}

// 时间比较函数
const compareDate = function (startDate, endDate) {
  var arrStart = startDate.split("-");
  var startTime = new Date(arrStart[0], arrStart[1], arrStart[2]);
  var startTimes = startTime.getTime();
  var arrEnd = endDate.split("-");
  var endTime = new Date(arrEnd[0], arrEnd[1], arrEnd[2]);
  var endTimes = endTime.getTime();
  if (endTimes <= startTimes) {
    return false;
  }
  return true;
}

const getHour = function () {
  var myDate = new Date();
  var theHour = myDate.getHours()
  return theHour
}

const getDays = function (date1, date2) {
  var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日  
  //根据年 . 月 . 日的值创建Date对象  
  var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
  var date2Str = date2.split("-");
  var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
  var t1 = date1Obj.getTime();
  var t2 = date2Obj.getTime();
  var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数  
  var minusDays = Math.floor(((t2 - t1) / dateTime));//计算出两个日期的天数差  
  var days = Math.abs(minusDays);//取绝对值  
  return days;
}  

const getWeek = function (theDate) {
  var weekDay = ["周天", "周一", "周二", "周三", "周四", "周五", "周六"];
  var weekName = weekDay[new Date(Date.parse(theDate)).getDay()]
  return weekName
}

const getDate = function (theDate) {
  var getDate = new Date(Date.parse(theDate)).getDate() 
  return util.formatNumber(getDate)
}

const getMonth = function (theDate) {
  var getMonth = new Date(Date.parse(theDate)).getMonth() + 1
  return util.formatNumber(getMonth)
}

const getFullYear = function (theDate) {
  var getFullYear = new Date(Date.parse(theDate)).getFullYear()
  return getFullYear
}

const diffDate = function (startDate, endDate) {
  console.log('调用了 diffDate 函数' + startDate + endDate)
  var startNewDate = new Date(startDate)
  var endNewDate = new Date(endDate)
  var startTime = startNewDate.getTime()
  var endTime = endNewDate.getTime()
  var diff = endTime - startTime
  var days = diff / (24 * 60 * 60)
  console.log(parseInt(days))
  return parseInt(days)
}

module.exports = {
  dateAdd: dateAdd,
  theDate: theDate,
  compareDate: compareDate,
  getHour: getHour,
  getWeek: getWeek,
  getDate: getDate,
  getMonth: getMonth,
  getFullYear: getFullYear,
  getDays:getDays,
  diffDate: diffDate
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注