微信小程序可滑動(dòng)月日歷組件使用詳解
更新時(shí)間：2019年10月21日 11:00:29 作者：康彥
這篇文章主要為大家詳細(xì)介紹了微信小程序可滑動(dòng)月日歷組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
微信小程序可滑動(dòng)月日歷組件
此日歷可進(jìn)行左右滑動(dòng)，展示簽到打卡信息，和大家分享一下。
如果樣式變形，請(qǐng)檢查是否有共用樣式起沖突
展示一下效果圖
在components組件文件夾下新建calendarMonth文件夾
直接上代碼吧：
index.wxml
<!--components/calendar/index.wxml-->
<view class='month'>
<!-- <view class='arrow' bindtap='prevMonth'>《 </view> -->
<view>
<picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange">
<view >
{{date}}
</view>
</picker>
</view>
<!-- <view class='arrow' bindtap='nextMonth'> 》</view> -->
</view>
<view class='container'>
<view class='calendar flex column s-center'>
<view class='week-row flex m-around wid100'>
<view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view>
</view>
<swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'>
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}'>{{x.date === today?'今天':x.day}}</view>
<block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="{{index}}">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">記</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block>
</view>
</swiper-item>
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'>
<view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}'>{{x.date === today?'今天':x.day}}</view>
<block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="{{index}}">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">記</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block>
</view>
</swiper-item>
<swiper-item class='flex m-around days-table'>
<view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date'
class='grid fw {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}{{x.month === month?"":"notCurrent"}}'>{{x.date === today?'今天':x.day}}</view>
<block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="{{index}}">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">記</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block>
</view>
</swiper-item>
<swiper-item class='flex m-around days-table '>
<view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date'
class='grid fw {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
<view class='view {{x.year+"-"+x.month+"-"+x.day === date+"-01"?"choice2":""}}'>{{x.date === today?'今天':x.day}}</view>
<block wx:if="{{workerClockData.length>0}}">
<view wx:for="{{workerClockData}}" wx:key="{{index}}">
<text class='da' wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">記</text>
<text class='da2'wx:if="{{x.year+'-'+x.month+'-'+x.day==item.clockDate}}">+{{item.actualDayWage}}</text>
</view>
</block>
</view>
</swiper-item>
</swiper>
</view>
</view>
index.wxss
/* pages/calendar/calendar.wxss */
.container{
width: 100%;
height: auto;
padding: 6rpx;
font-size: 28rpx;
}
.month{
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color:#333333;
font-weight: 700;
border-bottom: 1px solid #f5f5f5;
}
.days-table {
flex-wrap: wrap;
align-content: flex-start;
}
.wid100{
width: 100%;
}
.calendar{
z-index:10000;
}
.grid {
/* width: 107.14rpx; */
height: 100rpx;
text-align: center;
line-height: 100rpx;
font-size:.7rem;
color:#333333;
flex: 1;
}
.today {
color: red;
}
.grid view {
height:85rpx;
line-height: 85rpx;
width:85rpx;
flex: 1
}
.choice2 {
/* border-radius: 50%; */
background: silver;
background-position:center;
color: white;
}
.choice .view{
flex: 1;
border-radius: 50%;
background: #88a1fd;
background-position:center;
color: white;
display: flex;
align-items: center;
justify-content: center
}
.fw {
font-weight: 700;
font-size: 28rpx;
position: relative;
}
.grid text.da{
display: flex;
width: 32rpx;
height: 32rpx;
position: absolute;
right:12rpx;
top:1rpx;
font-weight: 1000;
background: red;
border-radius: 50%;
overflow: hidden;
text-align: center;
line-height: 24rpx;
color: #ffffff;
font-size: 8px;
align-items: center;
justify-content: center
}
.grid text.da2 {
width: 100%;
height: 100%;
text-align: center;
font-size: 12px;
font-weight: 800;
color: red;
position: absolute;
bottom:-25rpx;
display: flex;
left: -4rpx;
align-items: center;
justify-content: center;
}
/* 非本月日期 */
.notCurrent {
color: silver;
font-weight: normal
}
.day-hover {
background: red;
}
.container .corred {
color: red;
}
.swpier-box {
height: 600rpx;
width: 100%;
}
.arrow {
width: 100rpx;
color: #88a1fd;
text-align: center;
}
.flex {
display: flex;
}
/* 軸向 */
.column {
flex-direction: column;
}
/* 主軸方向 */
.m-start {
justify-content: flex-start;
}
.m-end {
justify-content: flex-end;
}
.m-around {
justify-content: space-around;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.m-between {
justify-content: space-between;
}
.m-center {
justify-content: center;
}
/* 側(cè)軸方向 */
.s-start {
align-items: flex-start;
}
.s-end {
align-items: flex-end;
}
.s-around {
align-items: space-around;
}
.s-between {
align-items: space-between;
}
.s-center {
align-items: center;
}
index.js
// components/calendar/index.js
let choose_year = null,
choose_month = null;
Component({
/**
* 組件的屬性列表
*/
properties: {
workerClockData: {
type: Array,
observer: function (newVal, oldVal, changedPath) {
// console.log(newVal, oldVal, changedPath,this)
}
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
day: '',
year: '',
month: '',
date: '2017-01',
today: '',
week: ['日', '一', '二', '三', '四', '五', '六'],
calendar: {
first: [],
second: [],
third: [],
fourth: []
},
swiperMap: ['first', 'second', 'third', 'fourth'],
swiperIndex: 1,
showCaldenlar: false
},
ready: function () {
this.getinit()
},
/**
* 組件的方法列表
*/
methods: {
getinit() { //初始化
const date = new Date()
, month = this.formatMonth(date.getMonth() + 1)
, year = date.getFullYear()
, day = this.formatDay(date.getDate())
, today = `${year}-${month}-${day}`
let calendar = this.generateThreeMonths(year, month)
// console.log(calendar)
this.setData({
calendar,
month,
year,
day,
today,
beSelectDate: today,
date: `${year}-${month}`
})
},
showCaldenlar() {
this.setData({
showCaldenlar: !this.data.showCaldenlar
})
},
/**
*
* 左右滑動(dòng)
* @param {any} e
*/
swiperChange(e) {
const lastIndex = this.data.swiperIndex
, currentIndex = e.detail.current
let flag = false
, { year, month, day, today, date, calendar, swiperMap } = this.data
, change = swiperMap[(lastIndex + 2) % 4]
, time = this.countMonth(year, month)
, key = 'lastMonth'
console.log(lastIndex, currentIndex)
if (lastIndex > currentIndex) {
lastIndex === 3 && currentIndex === 0
? flag = true
: null
} else {
lastIndex === 0 && currentIndex === 3
? null
: flag = true
}
if (flag) {
key = 'nextMonth'
}
console.log(key)
year = time[key].year
month = time[key].month
date = `${year}-${month}`
day = ''
if (today.indexOf(date) !== -1) {
day = today.slice(-2)
}
time = this.countMonth(year, month)
calendar[change] = null
calendar[change] = this.generateAllDays(time[key].year, time[key].month)
this.setData({
swiperIndex: currentIndex,
//文檔上不推薦這么做，但是滑動(dòng)并不會(huì)改變current的值，所以隨之而來(lái)的計(jì)算會(huì)出錯(cuò)
year,
month,
date,
day,
calendar
})
// console.log(calendar)
},
/**
*
* 點(diǎn)擊切換月份，生成本月視圖以及臨近兩個(gè)月的視圖
* @param {any} year
* @param {any} month
* @returns {object} calendar
*/
generateThreeMonths(year, month) {
let { swiperIndex, swiperMap, calendar } = this.data
, thisKey = swiperMap[swiperIndex]
, lastKey = swiperMap[swiperIndex - 1 === -1 ? 3 : swiperIndex - 1]
, nextKey = swiperMap[swiperIndex + 1 === 4 ? 0 : swiperIndex + 1]
, time = this.countMonth(year, month)
delete calendar[lastKey]
calendar[lastKey] = this.generateAllDays(time.lastMonth.year, time.lastMonth.month)
delete calendar[thisKey]
calendar[thisKey] = this.generateAllDays(time.thisMonth.year, time.thisMonth.month)
delete calendar[nextKey]
calendar[nextKey] = this.generateAllDays(time.nextMonth.year, time.nextMonth.month)
return calendar
},
bindDayTap(e) {
let { month, year } = this.data
, time = this.countMonth(year, month)
, tapMon = e.currentTarget.dataset.month
, day = e.currentTarget.dataset.day
if (tapMon == time.lastMonth.month) {
this.changeDate(time.lastMonth.year, time.lastMonth.month)
} else if (tapMon == time.nextMonth.month) {
this.changeDate(time.nextMonth.year, time.nextMonth.month)
} else {
this.setData({
day
})
}
let beSelectDate = e.currentTarget.dataset.date;
this.setData({
beSelectDate,
showCaldenlar: false
})
// console.log(beSelectDate)
},
bindDateChange(e) {
if (e.detail.value === this.data.date) {
return
}
const month = e.detail.value.slice(-2)
, year = e.detail.value.slice(0, 4)
this.changeDate(year, month)
},
prevMonth(e) {
let { year, month } = this.data
, time = this.countMonth(year, month)
this.changeDate(time.lastMonth.year, time.lastMonth.month)
},
nextMonth(e) {
let { year, month } = this.data
, time = this.countMonth(year, month)
this.changeDate(time.nextMonth.year, time.nextMonth.month)
},
/**
*
* 直接改變?nèi)掌?
* @param {any} year
* @param {any} month
*/
changeDate(year, month) {
let { day, today } = this.data
, calendar = this.generateThreeMonths(year, month)
, date = `${year}-${month}`
date.indexOf(today) === -1
? day = '01'
: day = today.slice(-2)
this.setData({
calendar,
day,
date,
month,
year,
})
},
/**
*
* 月份處理
* @param {any} year
* @param {any} month
* @returns
*/
countMonth(year, month) {
let lastMonth = {
month: this.formatMonth(parseInt(month) - 1)
}
, thisMonth = {
year,
month,
num: this.getNumOfDays(year, month)
}
, nextMonth = {
month: this.formatMonth(parseInt(month) + 1)
}
lastMonth.year = parseInt(month) === 1 && parseInt(lastMonth.month) === 12
? `${parseInt(year) - 1}`
: year + ''
lastMonth.num = this.getNumOfDays(lastMonth.year, lastMonth.month)
nextMonth.year = parseInt(month) === 12 && parseInt(nextMonth.month) === 1
? `${parseInt(year) + 1}`
: year + ''
nextMonth.num = this.getNumOfDays(nextMonth.year, nextMonth.month)
return {
lastMonth,
thisMonth,
nextMonth
}
},
currentMonthDays(year, month) {
const numOfDays = this.getNumOfDays(year, month)
return this.generateDays(year, month, numOfDays)
},
/**
* 生成上個(gè)月應(yīng)顯示的天
* @param {any} year
* @param {any} month
* @returns
*/
lastMonthDays(year, month) {
const lastMonth = this.formatMonth(parseInt(month) - 1)
, lastMonthYear = parseInt(month) === 1 && parseInt(lastMonth) === 12
? `${parseInt(year) - 1}`
: year
, lastNum = this.getNumOfDays(lastMonthYear, lastMonth) //上月天數(shù)
let startWeek = this.getWeekOfDate(year, month - 1, 1) //本月1號(hào)是周幾
, days = []
if (startWeek == 7) {
return days
}
const startDay = lastNum - startWeek
return this.generateDays(lastMonthYear, lastMonth, lastNum, { startNum: startDay, notCurrent: true })
},
/**
* 生成下個(gè)月應(yīng)顯示天
* @param {any} year
* @param {any} month
* @returns
*/
nextMonthDays(year, month) {
const nextMonth = this.formatMonth(parseInt(month) + 1)
, nextMonthYear = parseInt(month) === 12 && parseInt(nextMonth) === 1
? `${parseInt(year) + 1}`
: year
, nextNum = this.getNumOfDays(nextMonthYear, nextMonth) //下月天數(shù)
let endWeek = this.getWeekOfDate(year, month) //本月最后一天是周幾
, days = []
, daysNum = 0
if (endWeek == 6) {
return days
} else if (endWeek == 7) {
daysNum = 6
} else {
daysNum = 6 - endWeek
}
return this.generateDays(nextMonthYear, nextMonth, daysNum, { startNum: 1, notCurrent: true })
},
/**
*
* 生成一個(gè)月的日歷
* @param {any} year
* @param {any} month
* @returns Array
*/
generateAllDays(year, month) {
let lastMonth = this.lastMonthDays(year, month)
, thisMonth = this.currentMonthDays(year, month)
, nextMonth = this.nextMonthDays(year, month)
, days = [].concat(lastMonth, thisMonth, nextMonth)
// console.log("jin")
// console.log(year, month, days)
return days
},
/**
*
* 生成日詳情
* @param {any} year
* @param {any} month
* @param {any} daysNum
* @param {boolean} [option={
* startNum:1,
* grey: false
* }]
* @returns Array 日期對(duì)象數(shù)組
*/
generateDays(year, month, daysNum, option = {
startNum: 1,
notCurrent: false
}) {
const weekMap = ['一', '二', '三', '四', '五', '六', '日']
let days = []
for (let i = option.startNum; i <= daysNum; i++) {
let week = weekMap[new Date(year, month - 1, i).getUTCDay()]
let day = this.formatDay(i)
days.push({
date: `${year}-${month}-${day}`,
event: false,
day,
week,
month,
year
})
}
return days
},
/**
*
* 獲取指定月第n天是周幾 |
* 9月第1天： 2017, 08, 1 |
* 9月第31天：2017, 09, 0
* @param {any} year
* @param {any} month
* @param {number} [day=0] 0為最后一天，1為第一天
* @returns number 周 1-7,
*/
getWeekOfDate(year, month, day = 0) {
let dateOfMonth = new Date(year, month, 0).getUTCDay() + 1;
dateOfMonth == 7 ? dateOfMonth = 0 : '';
return dateOfMonth;
},
/**
*
* 獲取本月天數(shù)
* @param {number} year
* @param {number} month
* @param {number} [day=0] 0為本月0最后一天的
* @returns number 1-31
*/
getNumOfDays(year, month, day = 0) {
return new Date(year, month, day).getDate()
},
/**
*
* 月份處理
* @param {number} month
* @returns format month MM 1-12
*/
formatMonth(month) {
let monthStr = ''
if (month > 12 || month < 1) {
monthStr = Math.abs(month - 12) + ''
} else {
monthStr = month + ''
}
monthStr = `${monthStr.length > 1 ? '' : '0'}${monthStr}`
return monthStr
},
formatDay(day) {
return `${(day + '').length > 1 ? '' : '0'}${day}`
}
}
})
調(diào)用組件
//json文件調(diào)用
"usingComponents": {
"calendarMonth": "../../components/calendarMonth/index"
}
頁(yè)面調(diào)用組件
//workerClockData 傳過(guò)去的數(shù)據(jù) 顯示簽到金額 和 記
<calendarMonth workerClockData="{{workerClockData}}"></calendarMonth>
要顯示打卡數(shù)據(jù)要傳入?yún)?shù)，格式為如下，格式為數(shù)組
更多精彩的日歷效果請(qǐng)學(xué)習(xí)參考專題：javascript日歷插件
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
教您去掉ie網(wǎng)頁(yè)加載進(jìn)度條的方法
相信很多同仁做的系統(tǒng)后到都是用frameset或iframe來(lái)加載不同頁(yè)面的，不可不知道大家有沒有注意到，當(dāng)frame框架中的頁(yè)面已經(jīng)加載完成后，可是ie瀏覽器的狀態(tài)欄還會(huì)一直顯示一個(gè)正在加載的狀態(tài)。2010-12-12
這篇文章主要介紹了js實(shí)現(xiàn)表單Radio切換效果的方法,涉及javascript實(shí)現(xiàn)頁(yè)面元素的隱藏與顯示及復(fù)選框的遍歷技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
用原生js統(tǒng)計(jì)文本行數(shù)的簡(jiǎn)單示例
這篇文章我們來(lái)看看如何利用原生的JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本的行數(shù)，代碼實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，有需要的可以參考借鑒。2016-08-08
這篇文章主要介紹了ElementUI中Tree組件使用案例講解,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
經(jīng)典面試題之JavaScript?for循環(huán)(var?let)
如果你也在面試找工作,那么也一定遇到過(guò)這道for循環(huán)打印結(jié)果的題,下面我們來(lái)探討下,對(duì)經(jīng)典面試題之js?for循環(huán)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
javascript語(yǔ)言是一門優(yōu)秀的腳本語(yǔ)言.其中包含腳本語(yǔ)言的靈活性外還擁有許多高級(jí)語(yǔ)言的特性.2011-01-01
微信小程序使用this.setData()遇到的問(wèn)題及解決方案詳解
this.setData估計(jì)是小程序中最經(jīng)常用到的一個(gè)方法,但是要注意其實(shí)他是有限制的,忽略這些限制的話,會(huì)導(dǎo)致數(shù)據(jù)無(wú)法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問(wèn)題及解決方案,需要的朋友可以參考下2022-08-08
簡(jiǎn)單JS代碼壓縮器...2006-10-10
這篇文章主要介紹了深入理解redux之compose的具體應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JS實(shí)現(xiàn)紙牌發(fā)牌動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)紙牌發(fā)牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01