js日历相关函数使用详解
本文实例为大家分享了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>
相关文章
Tricia
2021-02-01
Sally
2021-01-16
Lani
2023-07-20
Hazel
2023-07-20
Sue
2023-07-20
Antonia
2023-07-20
Zahirah
2023-07-20
Rae
2023-07-20
Vala
2023-07-20
Bree
2023-07-20
Edana
2023-07-20
Dabria
2023-07-20
Paula
2023-07-20
Peony
2023-07-20
Rayna
2023-07-20
Fawn
2023-07-21
Tia
2023-07-21
Victoria
2023-07-21
Olathe
2023-07-21