附上效果图，取最近三个月的时间，自定义选择高亮日期
wxml：
<calendar currentYear='{{nowYear}}' currentMonth="{{nowMoutn}}" nowYear="{{nowYear}}" nowMonth="{{nowMoutn}}" nowDate="{{nowDay}}" bindsendObj='getCalendarData'></calendar>
组件：
<view class="calendar">
<view class='tit'>
<view class="pre {{onchoose == 0?'current':''}}" bindtap='choosePreMonth'>{{prevMonth}}</view>
<view class="center {{onchoose == 1?'current':''}}" bindtap="chooseNowMonth">{{nowMonthNum}}</view>
<view class="next {{onchoose == 2?'current':''}}" bindtap='chooseNextMonth'>{{nextMonth}}</view>
</view>
<view class="calenderModel">
<view class="calenderBorder">
<view class='w100P showData'>
<view>Mon</view>
<view>Tue</view>
<view>Wen</view>
<view>Thu</view>
<view>Fri</view>
<view>Sat</view>
<view>Sun</view>
</view>
<view class='content'>
<view wx:for="{{allArr}}" wx:key="{{index}}" class='itemData' data-currency="{{item.month == 'current' ? '1' : '0'}}" data-day='{{item.date}}' bindtap='getNowData'>
<view class="dateNum {{item.month == 'current' ? '' : 'gray'}} {{item.date < nowDate?'gray':''}}{{item.month == 'current' &&nowYear==currentYear && currentMonth==nowMonth && item.date==nowDate?'active':''}}" >{{item.date}}</view>
</view >
</view>
</view>
</view>
</view>
组件js：
// components/calendar/calendar.js
var util = require('../../utils/util.js')
Component({
/**
* 组件的属性列表
*/
properties: {
currentYear: { // 当前显示的年
type: Number,
value: ''
},
currentMonth: { // // 当前显示的月
type: Number,
value: ''
},
nowYear: { // // 当前显示的月
type: Number,
value: ''
},
nowMonth: { // // 当前显示的月
type: Number,
value: ''
},
nowDate: { // // 当前显示的月
type: Number,
value: new Date().getDate()
},
},
/**
* 组件的初始数据
*/
data: {
onchoose:1,
prevMonth:'',
nowMonthNum:'',
nextMonth:'',
currentMonthDateLen: 0, // 当月天数
preMonthDateLen: 0, // 当月中，上月多余天数
allArr: [], //
nowData: ""
},
ready() {
this.getAllArr()
this.getMonthNum()
},
onLoad: function () {
// 调用函数时，传入new Date()参数，返回值是日期和时间
var time = util.formatTime(new Date());
// 再通过setData更改Page()里面的data，动态更新页面的数据
this.setData({
nowData: time
});
consolelog("this.data.nowData")
console.log(this.data.nowData)
},
/**
* 组件的方法列表
*/
methods: {
getMonthNum(){
var monthArrey=['January','February','March','April','May','June','July','August','September','October','November','December']
var nowMonthDate = new Date().getMonth() + 1
console.log(monthArrey[nowMonthDate])
console.log(nowMonthDate,9999)
console.log(this.data)
this.setData({
nowMonthNum:monthArrey[nowMonthDate],
prevMonth:monthArrey[nowMonthDate - 1],
nextMonth:monthArrey[nowMonthDate + 1],
})
},
// 获取某年某月总共多少天
getDateLen(year, month) {
let actualMonth = month - 1;
let timeDistance = +new Date(year, month) - +new Date(year, actualMonth);
return timeDistance / (1000 * 60 * 60 * 24);
},
// 获取某月1号是周几
getFirstDateWeek(year, month) {
console.log(new Date(year, month - 1, 1).getDay(),'获取当月1号是周几')
return new Date(year, month - 1, 1).getDay()
},
// 上月 年、月
preMonth(year, month) {
if (month == 1) {
return {
year: --year,
month: 12
}
} else {
return {
year: year,
month: --month
}
}
},
// 下月 年、月
nextMonth(year, month) {
if (month == 12) {
return {
year: ++year,
month: 1
}
} else {
return {
year: year,
month: ++month
}
}
},
// 获取当月数据，返回数组
getCurrentArr() {
let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数
let currentMonthDateArr = [] // 定义空数组
if (currentMonthDateLen > 0) {
for (let i = 1; i <= currentMonthDateLen; i++) {
currentMonthDateArr.push({
month: 'current', // 只是为了增加标识，区分上下月
date: i
})
}
}
this.setData({
currentMonthDateLen
})
return currentMonthDateArr
},
// 获取当月中，上月多余数据，返回数组
getPreArr() {
let preMonthDateLen = this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth) // 当月1号是周几 == 上月残余天数）
console.log(preMonthDateLen)
let preMonthDateArr = [] // 定义空数组
if (preMonthDateLen > 0) {
let {
year,
month
} = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月
let date = this.getDateLen(year, month) // 获取上月天数
for (let i = 0; i < preMonthDateLen - 1; i++) {
preMonthDateArr.unshift({ // 尾部追加
month: 'pre', // 只是为了增加标识，区分当、下月
date: date
})
date--
}
}
this.setData({
preMonthDateLen
})
return preMonthDateArr
},
// 获取当月中，下月多余数据，返回数组
getNextArr() {
let nextMonthDateLen = 35 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数
let nextMonthDateArr = [] // 定义空数组
if (nextMonthDateLen > 0) {
for (let i = 1; i <= nextMonthDateLen + 1; i++) {
nextMonthDateArr.push({
month: 'next', // 只是为了增加标识，区分当、上月
date: i
})
}
}
return nextMonthDateArr
},
// 整合当月所有数据
getAllArr() {
let preArr = this.getPreArr()
console.log(preArr)
let currentArr = this.getCurrentArr()
let nextArr = this.getNextArr()
let allArr = [...preArr, ...currentArr, ...nextArr]
this.setData({
allArr
})
let sendObj = {
currentYear: this.data.currentYear,
currentMonth: this.data.currentMonth,
nowYear: this.data.nowYear,
nowMonth: this.data.nowMonth,
nowDate: this.data.nowDate,
allArr: allArr
}
// console.log(sendObj)
this.triggerEvent('sendObj', sendObj)
},
// 点击 上月
gotoPreMonth() {
let {
year,
month
} = this.preMonth(this.data.currentYear, this.data.currentMonth)
console.log(year,month)
this.setData({
currentYear: year,
currentMonth: month,
})
this.getAllArr()
},
choosePreMonth(){
if(this.data.onchoose == 0){
return false
}
let {
year,
month
} = this.preMonth(this.data.currentYear, this.data.currentMonth)
console.log(year,month)
this.setData({
currentYear: year,
currentMonth: month,
})
this.getAllArr()
this.setData({
onchoose:0
})
},
chooseNowMonth(){
this.setData({
onchoose:1
})
},
chooseNextMonth(){
this.setData({
onchoose:2
})
},
// 点击 下月
gotoNextMonth() {
let {
year,
month
} = this.nextMonth(this.data.currentYear, this.data.currentMonth)
this.setData({
currentYear: year,
currentMonth: month
})
this.getAllArr()
},
getNowData(e) {
var data = e.currentTarget.dataset.day;
var currency = e.currentTarget.dataset.currency;
if (currency == 1) {
this.setData({
nowYear: this.data.currentYear,
nowMonth: this.data.currentMonth,
nowDate: data
})
}
this.getAllArr()
}
}
})
index.js ：
Page({
/**
* 页面的初始数据
*/
data: {
momdata:['5','6','7'],
week:['won','tws','ths','fou','fir','sou','son']
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var nowYear = new Date().getFullYear();
var nowMoutn = new Date().getMonth() + 1;
var nowDay = new Date().getDate();
console.log(nowDay)
this.setData({
nowYear:nowYear,
nowMoutn:nowMoutn,
nowDay:nowDay
})
},
getCalendarData(e) { // 监听日历数据
console.log(e.detail)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
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
}
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss ：
.calendar {
width: 100%;
background: #fff;
}
.pre,
.next {
color: #666;
height: 70rpx;
text-align: center;
line-height: 70rpx;
background: #EEE;
flex: 0.3;
}
.pre{
border-radius: 12rpx 12rpx 0 0;
}
.next{
border-radius: 12rpx 12rpx 0 0;
}
.showData {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-weight: bold;
color: #333;
padding: 10rpx 25rpx;
}
.showData view {
width: 14%;
height: 70rpx;
line-height: 70rpx;
text-align: center;
flex-shrink: 0;
font-size: 30rpx;
color: #2A2A2A;
/* background: rgb(224, 199, 199); */
}
.calendar .tit {
display: flex;
justify-content: center;
height: 90rpx;
border-bottom: 2rpx solid #eee;
align-items: flex-end;
}
.center{
color: #666;
height: 70rpx;
text-align: center;
line-height: 70rpx;
background: #EEE;
flex: 0.3333;
text-align: center;
margin: 0 10rpx;
border-radius: 12rpx 12rpx 0 0;
}
.current {
font-size: 36rpx;
color: #fff;
font-weight: bold;
background: #C11613;
height: 90rpx;
text-align: center;
line-height: 90rpx;
}
.calendar .content {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding-left: 25rpx;
padding-right: 25rpx;
}
.calendar .content .itemData {
width: 14.2%;
height: 90rpx;
line-height: 90rpx;
flex-shrink: 0;
font-size: 30rpx;
color: #2A2A2A;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* background: rgb(224, 199, 199); */
}
.calendar .content .gray {
color: #999;
}
.calenderModel{
padding: 30rpx;
}
.calenderBorder{
border: 2rpx solid #eee;
border-radius: 12rpx;
padding: 20rpx 0;
}
.dateNum{
width: 60rpx;
height: 60rpx;
line-height:60rpx;
}
.active{
color:#fff;
background:#00BBFE;
border-radius:100px
}
扫一扫
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
