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