本文实例为大家分享了js日历相关函数的具体代码,供大家参考,具体内容如下
1、获取某年某月第一天是周几
getMonthStartDay(year, month, index) { let monthFirstDay = Number(new Date(year, month, 1).getDay()) return monthFirstDay } this.getMonthStartDay(2021, 06, 1)
2、获取某年某月某天是一年中第几周
getWeek(year, month, day) { //计算当年一月第一天是周几 let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay()) //计算某天是第几周 let dateDay = year + '-' + month + '-' + day let d1 = new Date(dateDay) let d2 = new Date(dateDay) d2.setMonth(0)//设置月份 d2.setDate(0)//设置一月中的第一天 let days = Math.ceil((d1 - d2) / (24 * 60 * 60 * 1000)) let num = Math.ceil((days + yearFirstDay) / 7) return num } this.getWeek(2021, 06, 1)
3、获取某年某月一共有多少天
getDaysInMonth(year, month, index) { const daysOfMonth = [] month = parseInt(month, 10) const lastDayOfMonth = new Date(year, month, 0).getDate() for (let i = 1; i <= lastDayOfMonth; i++) { let obj = { value: i } daysOfMonth.push(obj) } return daysOfMonth } this.getDaysInMonth(2021, 06, 1)
一、日历demo
效果图
完整代码(组件)
<template> <!--年视图日历--> <el-scrollbar class="calendar" ref="calendarRef"> <div v-for="(temp, index) in monthArr" :key="'S' + index" style="width: 100%;height: auto" :id="'S' + index"> <div style="width: 100%;display: flex"> <p style="width: 50px;max-width: 50px;min-width:50px;background: #f5f4f4;height: 43px;line-height: 43px;font-size: 12px;cursor: pointer;text-align: center" @click="handleMonth(temp.index)"> {{temp.index}} 月 </p> <p style="height: 43px;line-height: 43px;font-weight: 600;padding-left: 10px;font-size: 14px">{{temp.value}}</p> </div> <ul class="calendarTitle"> <li v-for="(item, index) in calendarTitleArr" :key="index" class="calendarItem">{{item}}</li> </ul> <div style="width: 100%;display: flex"> <div class="calendarItem sumWeekIndex"> <div v-for="(item, index) in temp.sumWeek" :key="'W' + index" class="sumWeekClass" :class="item.Num === activeCalendarItem ? 'activeCalendarItem' : ''" :style="item.Num === activeCalendarItem ? 'color: #FF6A39;':''" @click="handleWeekNumber(temp,item)">{{item.Num}}{{item.Num === activeCalendarItem ? '周' : ''}}</div> </div> <div class="calendarContent"> <div v-for="item in temp.monthFirstDay" :key="'N' + item" class="calendarItem"></div> <div v-for="(item, index) in temp.calendarDateArr" :key="index" class="calendarItem" :class="((item.Num === activeCalendarItem) || (item.focu === 1)) ? 'activeCalendarItem' : ''" @click="handleDay(temp.key, temp.index, item)"> <div :class="item.logDateFlag === 1 ?'span':''"> <span :style="temp.key == redMonth ? (item.value == redDay ? 'color: #EE1B24' : '') : ''">{{item.value}}</span> <span class="calendarItemFlag"> <i class="iconfont icon-yipiyue1" v-if="item.reviewFlag === '1'"></i> </span> </div> </div> </div> </div> </div> </el-scrollbar> </template> <script> export default { name: 'calendar', data() { return { calendarTitleArr: [ '', '日', '一', '二', '三', '四', '五', '六' ], // calendarDateArr: [],//每月多少天 // monthFirstDay: '',//某月第一天是周几 //sumWeek: '',//某月共几周 // month: 1, monthArr: [ {key: '01', value: '一月', index: 1, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '02', value: '二月', index: 2, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '03', value: '三月', index: 3, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '04', value: '四月', index: 4, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '05', value: '五月', index: 5, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '06', value: '六月', index: 6, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '07', value: '七月', index: 7, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '08', value: '八月', index: 8, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '09', value: '九月', index: 9, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '10', value: '十月', index: 10, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '11', value: '十一月', index: 11, calendarDateArr: [], monthFirstDay: '', sumWeek: []}, {key: '12', value: '十二月', index: 12, calendarDateArr: [], monthFirstDay: '', sumWeek: []} ], activeCalendarItem: 1,//选中的某一周 day: 1, form: { content: '', startDate: '', endDate: '', createBy: { id: '' } }, dataList: [],//左侧日历 redDay: '01', redMonth: '01' } }, props: { year: { type: String, default: () => { return '1970' } }, startDay: { type: Array, default: () => { return [1,1] } }, endDay: { type: Array, default: () => { return [1,31] } }, changeDay: { type: Number, default: () => { return 0 } }, refresh: { type: Number, default: () => { return 0 } } }, mounted() { this.redMonth = this.moment(new Date()).format('MM') this.redDay = this.moment(new Date()).format('D') this.init() this.initHandle() }, computed: { evidenceHeight () { let height = this.$store.state.common.documentClientHeight - 243 return {height: height + 'px'} } }, methods: { /*获取某年某月一共有多少天 s*/ getDaysInMonth(year, month, index) { const daysOfMonth = [] month = parseInt(month, 10) const lastDayOfMonth = new Date(year, month, 0).getDate() for (let i = 1; i <= lastDayOfMonth; i++) { let obj = { value: i } daysOfMonth.push(obj) } let calendarDateArr = daysOfMonth calendarDateArr.forEach(temp => { this.$set(temp, 'Num', this.getWeek(year, month, temp.value)) }) this.monthArr.forEach(item => { if (index === item.index) { this.monthArr[index - 1].sumWeek = [] this.monthArr[index - 1].calendarDateArr = calendarDateArr this.monthArr[index - 1].calendarDateArr.forEach(i => { /*判断每月几周对应是一年的第几周*/ if (item.sumWeek.indexOf(i) === -1) { item.sumWeek.push(i) item.sumWeek = this.unique(item.sumWeek, 'Num') item.sumWeek = item.sumWeek.sort(this.compare('Num')) } }) } }) }, /*获取某年某月一共有多少天 e*/ /*获取某年某月第一天是周几 s*/ getMonthStartDay(year, month, index) { let monthFirstDay = Number(new Date(year, month - 1,1).getDay()) this.monthArr.forEach(item => { if (index === item.index) { this.monthArr[index - 1].monthFirstDay = monthFirstDay } }) //某月有几周 /* this.monthArr.forEach(temp => { if (index === temp.index) { this.monthArr[index - 1].sumWeek = Math.ceil(((this.monthArr[index - 1].calendarDateArr.length) - (7 - monthFirstDay)) / 7) + 1 } })*/ }, /*获取某年某月第一天是周几 e*/ /*获取某年某月某天是一年中第几周 s*/ getWeek(year, month, day) { //计算当年一月第一天是周几 let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay()) //计算某天是第几周 let dateDay = year + '-' + month + '-' + day let d1 = new Date(dateDay) let d2 = new Date(dateDay) d2.setMonth(0)//设置月份 d2.setDate(0)//设置一月中的第一天 let days = Math.ceil((d1 - d2) / (24 * 60 * 60 * 1000)) let num = Math.ceil((days + yearFirstDay) / 7) return num }, /*获取某年某月某天是一年中第几周 e*/ init(params) { this.refreshData() this.initHandle() let moment = require('moment') this.monthArr.forEach((item) => { this.getDaysInMonth(this.year, item.key, item.index) this.getMonthStartDay(this.year, item.key, item.index) this.getWeek(this.year, item.key, '01') }) let tempMonth = moment(new Date()).format('MM') let tempDay = moment(new Date()).format('D') this.activeCalendarItem = this.getWeek(this.year, tempMonth, tempDay) let val = this.year + '-' + tempMonth + '-' + tempDay let valObj = { onlyOnce: '0', flagDate: 'week', dayDate: '', weekDate: val, monthDate: '', day: this.day } if (!params) { this.$emit('getValue', valObj) } }, /*上级选择时间范围渲染日历*/ chooseFocus() { let startDay = this.startDay let endDay = this.endDay /**/ // this.activeCalendarItem = 0 this.monthArr.forEach((item, index) => { item.calendarDateArr.forEach(temp => { this.$set(temp, 'focu', 0) }) if (((Number(startDay[0]) - 1) <= index) && (index <= (Number(endDay[0]) - 1)) && startDay[0] === endDay[0]) { /*选择范围不跨月*/ this.monthArr[index].calendarDateArr.forEach(temp => { if ((Number(startDay[1]) <= temp.value) && (temp.value <= Number(endDay[1]))) { temp.focu = 1 } }) } else if (((Number(startDay[0]) - 1) <= index) && (index <= (Number(endDay[0]) - 1)) && Number(startDay[0]) !== Number(endDay[0])) { /*选择范围跨月*/ /*处理开始月*/ this.monthArr[startDay[0] - 1].calendarDateArr.forEach(temp => { // if ((Number(startDay[1]) <= temp.value) && (temp.value <= this.monthArr[index].calendarDateArr.length)) { if (temp.value >= Number(startDay[1])) { temp.focu = 1 } }) /*处理结束月*/ this.monthArr[endDay[0] - 1].calendarDateArr.forEach(temp => { if (temp.value <= Number(endDay[1])) { temp.focu = 1 } }) /*处理横跨的月份*/ let diff = Number(endDay[0]) - Number(startDay[0]) if (diff > 1) { let step = Number(startDay[0]) for (let i = step; i < Number(endDay[0]); i++) { if (i < Number(endDay[0]) - 1) { this.monthArr[i].calendarDateArr.forEach(temp => { temp.focu = 1 }) } } } } }) }, /*点击某一月事件*/ handleMonth(number){ this.activeCalendarItem = 0 this.monthArr.forEach((item, index) => { if (index === (number - 1)) { this.day = this.monthArr[index].calendarDateArr.length } item.calendarDateArr.forEach(temp => { if (index === (number - 1)) { this.$set(temp, 'focu', 1) } else { this.$set(temp, 'focu', 0) } }) }) let valObj = { flagDate: 'month', dayDate: '', weekDate: '', monthDate: number, day: this.day } this.$emit('getValue', valObj) }, /*点击某一周事件*/ handleWeekNumber(temp,item){ this.day = 0 temp.calendarDateArr.forEach(itep => { if (item.Num === itep.Num) { this.day++ } }) let val = this.year + '-' + temp.key + '-' + item.value let valObj = { flagDate: 'week', dayDate: '', weekDate: val, monthDate: '', day: this.day } this.$emit('getValue', valObj) this.activeCalendarItem = item.Num this.monthArr.forEach((item, index) => { item.calendarDateArr.forEach(temp => { this.$set(temp, 'focu', 0) }) }) }, //点击当前具体时间 handleDay(temp, number, item) { this.activeCalendarItem = 0 this.day = 1 this.monthArr.forEach((i, iIndex) => { i.calendarDateArr.forEach((j, jIndex) => { if (((number - 1) === iIndex) && ((item.value - 1) === jIndex)) { this.$set(j, 'focu', 1) } else { this.$set(j, 'focu', 0) } }) }) let time = this.year + '-' + temp + '-' + item.value let valObj = { flagDate: 'day', dayDate: time, weekDate: '', monthDate: '', day: this.day, hasWorkLog: item.logDateFlag } this.$emit('getValue', valObj) }, /*数组根据某个字段去重*/ unique(arr, val) { const res = new Map() return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1)) }, /*根据某字段排序*/ compare(property){ return function(a,b){ var value1 = a[property] var value2 = b[property] return value1 - value2 } }, refreshData() { let moment = require('moment') this.loading = true this.form.startDate = this.year + '-' + '01-01' this.form.endDate = this.year + '-' + '12-31' this.$http({ url: '/workLogInfo/list/workLog', method: 'post', data: { ...this.form } }).then(({data}) => { if (data && data.code === 200){ this.dataList = data.list this.dataList.forEach(data => { let dataTemp = data.logDate let reviewFlag = data.reviewFlag /*赋值有日志的图标*/ this.monthArr.forEach((item, index) => { if (Number(moment(dataTemp).format('M')) === item.index) { item.calendarDateArr.forEach((temp, index) => { if (Number(moment(dataTemp).format('D')) === temp.value) { this.$set(temp, 'logDateFlag', 1) this.$set(temp, 'reviewFlag', reviewFlag) } }) } }) }) this.loading = false } }).catch(() => { this.loading = false }) }, /*定位日历初始位置*/ initHandle() { let moment = require('moment') let tempId = 'S' + (moment(new Date()).format('M') - 1) this.$nextTick(() => { if (this.$refs.calendarRef) { let monthIdOffsetTop = document.getElementById(tempId).offsetTop let scrollbarEl = this.$refs.calendarRef.wrap scrollbarEl.scrollTop = monthIdOffsetTop } }) } }, watch: { changeDay(newVal, oldVal) { if (newVal !== oldVal) { this.chooseFocus() } }, year(newVal, oldVal) { if (newVal !== oldVal) { this.refreshData() } }, refresh(newVal, oldVal) { if (newVal !== oldVal) { this.monthArr.forEach((item, index) => { item.calendarDateArr.forEach(temp => { this.$set(temp, 'logDateFlag', 0) this.$set(temp, 'reviewFlag', '0') }) }) this.refreshData() } } } } </script> <style scoped lang="scss"> .calendar { width: 100%; height: 100%; box-sizing: border-box; overflow-y: auto; background: #FFFFFF; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; p{ /*width: calc(100% / 8);*/ width: 100%; text-align: left; box-sizing: border-box; } .calendarTitle { width: 100%; outline-style: none; display: flex; justify-items: center; align-items: center; padding: 0; .calendarItem{ color: #919191; &:first-child{ width: 50px; max-width: 50px; min-width: 50px; background: #f5f4f4; } } } .calendarContent { width: calc(100% - 50px); display: flex; justify-items: flex-start; align-items: center; flex-flow: wrap; padding: 0; .calendarItem { cursor: pointer; .span { display: inline-block; width: 21px; height: 21px; background: #40BD37; color: white; border-radius: 50%; font-size: 12px; line-height: 21px; position: relative; text-align: center; } } } .calendarItem { width: calc(100% / 7); height: 27px; /*height: 43px;*/ /*padding: 8px 5px;*/ font-size: 12px; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center; .calendarItemFlag { position: absolute; right: -5px; top: -9px; transform: scale(0.5); color: #FF6A39; } } .activeCalendarItem{ background: #FEDAA4; } .sumWeekIndex{ width: 50px; max-width: 50px; background: #f5f4f4; height: auto; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 0px; .sumWeekClass{ width: 32px; margin-top: 5px; margin-bottom: 4px; height: 27px; font-size: 12px; /*padding: 8px 5px;*/ display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 50%; } } } </style> <style lang="scss"> .calendar{ p,ul,li{ margin: 0; padding: 0; } } .calendar::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; } .calendar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .calendar:hover::-webkit-scrollbar-thumb { background: hsla(0, 0%, 53%, 0.4); box-shadow: 0 0 0 5px #DDDEE0 inset; } .calendar:hover::-webkit-scrollbar-track { background: hsla(0, 0%, 53%, 0.1); } </style>
组件调用
<Calendar :year="year" :startDay="startDay" :endDay="endDay" ref="Calendar" @getValue="getCalendarValue"></Calendar>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。