考虑到vux中的日历不是很符合有些项目的需求,所以结合大佬之前写的代码,做出一定修改,使用原生js做出如下这样一个日历模块。
因为项目中没有对滑动做具体要求,所以这里并没实现日历滑动效果,需要的同学可以引入swiper去完成。目前,只实现了修改datetime时间,下方的的日期排版根据周一至周六进行变化,以及点击某一天,此天样式会出现变化。
1 计算当前年月第一天是周几,以此得出这个月第一行中不显示日期的格子数量,以及要开始显示日期的位置。
2 计算在当前年月一共有多少天,并生成一个存储了2019-08-01到2019-08-31的数组,数组每一项都是一个对象,每一个对象其属性值都是一个日期。然后从第一行中开始显示日期的格子遍历上面的数组。每一个格子存储一个日期。
3 监听datetime日期的变化,一旦变化就调用第二步的方法,让日历随日期即时变化
<div class="my-calendar">
<div class="head-date">
<div class="sheet-date-time" @click="showDateTime()">
<span class="date-time-text">{{changeFormat1(sendDate)}}span>
<span class="triangle-down">span>
div>
div>
<div class="calendar-content">
<div class="calendar-wrap">
<section class="week">
<span v-for="(week, index ) in weekList" :key="'weekList' + index">{{week}}span>
section>
<section class="day">
<span class="blank"
v-if="blankList!='7'"
v-for="(blank, index ) in blankList" :key="'blankList' + index"
>{{blank}}span>
<span
class="dayBar"
v-for="(day, index ) in dayCalender" :key="'dayCalender' + index"
:class="{'chose-span':choseFlag===day}"
@click="clickDayDetail(day)"
>
<span
:class="{'show-today':new Date().toDateString()==new Date(day.date).toDateString()&&choseFlag!==day}"
v-if="new Date().toDateString()==new Date(day.date).toDateString()"
>今span>
<span
:class="{'show-Weekend':(new Date(day.date).getDay()===6||new Date(day.date).getDay()===0)&&choseFlag!==day}"
v-else-if="new Date().toDateString()!==new Date(day.date).toDateString()"
>{{new Date(day.date).getDate()}}span>
<span class="show-formal" v-else>{{new Date(day.date).getDate()}}span>
span>
section>
div>
div>
div>
data () {
return {
weekList: ['一', '二', '三', '四', '五', '六', '日'],
blankList: '', // 空白的格子数
choseFlag: '', // 用来调整今天选中的样式
dayCalender: [], // 日历数据
sendDate: '' // datetime日期
}
},
created () {
this.initialDateSet()
},
mounted () {
},
methods: {
// 获取当前年份和月份
initialDateSet () {
let nowDate = new Date()
let nowYear = nowDate.getFullYear()
let nowMonth = nowDate.getMonth() + 1 // 月份0-11
if (nowMonth < 10) {
this.sendDate = nowYear + '-' + '0' + nowMonth
} else {
this.sendDate = nowYear + '-' + nowMonth
}
},
// 传一个日期,获取这个月的所有日期 2019-07 获取--> 2019-07-01-----2019-07-31
getTimeSheet (date) { // 2019-01
console.log('我执行了: ', date)
let nowMonth = date.slice(5, 7)
let nowYear = date.slice(0, 4)
this.blankList = this.getBlank(nowYear, nowMonth - 1) - 1
this.dayCalender = []
let year = +date.split('-')[0]
let month = +date.split('-')[1]
let d = new Date(year, month, 0)
let dayLength = d.getDate() // 得到这一年这一月的天数
let everyDate = '' // 定义每一天的日期 2019-01-01
for (let k = 1; k <= dayLength; k++) {
everyDate = year + '-' + month + '-' + k
this.dayCalender.push({
date: this.changeFormat2(everyDate),
condition: ''
})
}
},
// 每月第一天周几
getBlank (year, month) {
let blankNum = new Date(year, month, '01') // 下一个月一号是周几
if (blankNum.getDay() === 0) {
return 7
}
return blankNum.getDay()
},
// 时间格式转化 2019-01 ---》 2019月1月
changeFormat1(date) {
let arr1 = date.split('-')
let year = arr1[0]
let month = +arr1[1]
return year + '年' + month + '月'
},
// 时间格式转化 2019-1-1 ---》 2019-01-01
changeFormat2 (date) {
let arr1 = date.split('-')
let year = arr1[0]
let month = +arr1[1]
let day = +arr1[2]
month = month < 10 ? ('0' + month) : month // 判断日期是否大于10
day = day < 10 ? ('0' + day) : day // 判断日期是否大于10
return year + '-' + month + '-' + day
},
// 展示开始时间框
showDateTime () {
let _this = this
this.$vux.datetime.show({
cancelText: '取消',
confirmText: '确定',
format: 'YYYY-MM',
value: _this.sendDate,
onConfirm (v) {
_this.sendDate = v
}
})
},
// 点击某天,显示样式
clickDayDetail (val) {
this.choseFlag = val // 获取当前日期
}
},
computed: {
},
watch: {
sendDate: {
handler (newValue, oldValue) {
this.getTimeSheet(newValue) // 监听sendDate变化,即时变化日历
},
immediate: true, // 页面一进入就开始监听
deep: false
}
}