在给一个幼儿园的小程序中用到了日历的功能，在此记录一下，如果有哪位大佬发现有bug，还请赐教
首先是判断出每个月的第一天是周几，然后进行样式修改就行了，其实还是很简单的😄
基本功能有
- 日历展示
- 上一个月
- 下一个月
- 切换月份
- 是否多选
废话不多说，上代码
------------------------------------------------------
wxml
<common-pannel>
<view class='calendar'>
<view class='calendar-top' >
<view class='left' bindtap='changeMonth' data-type='0'>
<image src='../../assets/img/showmore.png'></image>
<view>上一月</view>
</view>
<view class='select-date'>
<picker mode="date" fields="month" value="{{topMonth}}" bindchange="bindTopMonthChange">
<view class="picker">
{{topMonth}}<image src='../../assets/img/showmore.png'></image>
</view>
</picker>
</view>
<view class='right' bindtap='changeMonth' data-type='1'>
<view>下一月</view>
<image src='../../assets/img/showmore.png'></image>
</view>
</view>
<view class='week-top'>
<view>周一</view>
<view>周二</view>
<view>周三</view>
<view>周四</view>
<view>周五</view>
<view>周六</view>
<view>周日</view>
</view>
<view class='date-main'>
<view wx:for="{{isEmptyNum}}" wx:key="{{index}}">
</view>
<view wx:for="{{monthDates}}" wx:key="{{index}}" data-day='{{item.day}}' bindtap='selectDate'>
<view class="{{item.isActive ? 'active':''}}">
{{index + 1}}
</view>
</view>
</view>
</view>
</common-pannel>------------------------------------------------------
js
// components/calendar/calendar.jsComponent({
/** * 组件的属性列表 */
properties: {
isMultiple: {
type: Boolean,
default: false
}
},
/** * 组件的初始数据 */
data: {
topMonth: '',
monthDates: [],
isEmptyNum: 0,
nowMonth: 0,
nowDay: 0,
nowYear: 0},
ready() {
let date = new Date()
// 首先设置今天的日期
this.setData({
nowMonth: date.getMonth() + 1,
nowDay: date.getDate(),
nowYear: date.getFullYear()
}, () => {
this.getMonthDates(date)
})
},
/** * 组件的方法列表 */
methods: {
selectDate(e) {
let _day = e.currentTarget.dataset.day
let _index = this.data.monthDates.findIndex((item) => item.day == _day)
let _en = {}
// 设置为true
_en['monthDates[' + _index + '].isActive'] = true
// 如果是单选 找到现在选中的，并设置为false
if (!this.properties.isMultiple) {
let _nowIndex = this.data.monthDates.findIndex((item) => item.isActive == true)
if (_nowIndex > -1) {
_en['monthDates[' + _nowIndex + '].isActive'] = false
}
}
this.setData(_en, () => {
let _days = this.data.monthDates.filter((item) => item.isActive == true).map(i => i.day)
this.triggerEvent('outDays', _days)
})
},
/** * 顶部月份修改 */
bindTopMonthChange(e) {
console.log(e.detail.value)
let _value = e.detail.value
if (_value != this.data.topMonth) {
_value = _value.replace('-', '/') + '/1'
this.getMonthDates(new Date(_value))
}
},
/** * 上一月或者下一月 */
changeMonth(e) {
let _nowMonth = this.data.topMonth.split('-')[1]
let _nowYear = this.data.topMonth.split('-')[0]
// 如果是0 那么就是上一个月
if (e.currentTarget.dataset.type == 0) {
if (_nowMonth == 1) {
_nowMonth = 12
_nowYear--
} else {
_nowMonth--
}
} else {
if (_nowMonth == 12) {
_nowMonth = 1
_nowYear++
} else {
_nowMonth++
}
}
// 兼容写法
let nextStr = _nowYear + '/' + _nowMonth + '/1'
this.getMonthDates(new Date(nextStr))
},
/** * 获取数据 */
getMonthDates(date) {
let _nowYear = date.getFullYear()
let _nowMonth = date.getMonth() + 1
// fullDate 用于取当月所有的日期
let fullDate = new Date(_nowYear, parseInt(_nowMonth), 0).getDate()
// firstDay 用于取第一天的星期
let firstDay = new Date(_nowYear + '/' + _nowMonth + '/01').getDay()
// 如果是星期日，获取回来的就是 0 ，在这里赋值为 7
if(firstDay == 0) {
firstDay = 7
}
let _monthItem = {}
let _monthDates = []
for (let i = 0; i < fullDate; i++) {
_monthItem = {
day: _nowYear + '/' + _nowMonth + '/' + (i + 1),
isActive: false
}
// 如果现在的月份等于今天
if (this.daya.nowYear == _nowYear && this.data.nowDay == (i + 1) && _nowMonth == this.data.nowMonth) {
_monthItem.isActive = true
}
_monthDates.push(_monthItem)
}
this.setData({
topMonth: _nowYear + '-' + (_nowMonth < 10 ? '0' + _nowMonth : _nowMonth),
monthDates: _monthDates,
isEmptyNum: firstDay - 1
})
}
}})
------------------------------------------------------
wxss
/* components/calendar/calendar.wxss */
.calendar{
padding: 22rpx;
}
.calendar-top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size:30rpx;
font-family:PingFang-SC-Medium;
font-weight:400;
color:rgba(47,47,47,1);
}
.select-date>picker{
flex: 1;
display: flex;
align-items: center;
font-size:36rpx;
font-family:PingFang-SC-Medium;
font-weight:400;
color:rgba(47,47,47,1);
}
.picker{
display: flex;
align-items: center;
}
.picker image{
width: 25rpx;
height: 25rpx;
display: block;
transform: rotate(180deg);
margin-left: 10rpx;
}
.left>image, .right>image{
width: 25rpx;
height: 25rpx;
display: block;
}
.left, .right{
display: flex;
align-items: center;
}
.right>image{
transform: rotate(90deg)
}
.left>image{
transform: rotate(-90deg)
}
.week-top{
width: 100%;
height: 70rpx;
display: flex;
align-items: center;
}
.week-top>view{
width: calc(100% / 7);
text-align: center;
font-size:26rpx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(176,176,176,1);
}
.date-main{
width: 100%;
min-height: 70rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.date-main>view{
width: calc(100% / 7);
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size:34rpx;
font-family:PingFang-SC-Medium;
font-weight:400;
color:rgba(47,47,47,1);
}
.date-main>view .active{
width:53rpx;
height:53rpx;
background:rgba(74,161,250,1);
box-shadow:0px 6rpx 8rpx 0px rgba(0,118,255,0.2);
border-radius:50%;
font-size:34rpx;
font-family:PingFang-SC-Medium;
font-weight:500;
color:rgba(255,255,255,1);
display: flex;
align-items: center;
justify-content: center;
}------------------------------------------------------
掘金的编辑器好难用。。。。
