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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
赞 (0)
相关推荐
-
JS实现一个简单的日历
主要分为三个部分,1:获取li元素 2:如何填写对应的日期 3:如何获取点击li元素的事件. 1:通过节点间关系的属性children 获取li元素(两个for循坏遍历): 2:在遍历填写日期时,在第一行判断在当月的第一天在星期几,然后从第一天开始填写,直到大于当月的天数就暂停填写,并开始填写下个月的日期.第一行上个月的日期显示 : 上月天数显示开始值 = 计算上个月的天数 - 这个月开始的第一天在星期几的值 -1,然后在第一行上月天数显示开始值自加. 3:利用JS的事件冒泡获取li的inne
-
js css+html实现简单的日历
web页面中很多地方都会用到日历显示,选择等,本文用html.css.javascript实现简单的日历.完成以后的效果与页面左侧的效果差不多,可以切换上个月.下个月.也可以根据实际情况进行扩展. html html部分比较简单,声明一个div,具体的html用javascript生成.整体内容大概是这样的: <!doctype html> <html> <head> <meta charset='utf-8'> <link rel='styleshe
-
php+javascript的日历控件
复制代码 代码如下: <html> <head> <title>js calendar</title> <script language="javascript"> /* Copyright Mihai Bazon, 2002-2005 | www.bazon.net/mishoo * ----------------------------------------------------------- * * The DHT
-
轻量级的原生js日历插件calendar.js使用指南
使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-
-
Vue.js创建Calendar日历效果
使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,
-
纯js简单日历实现代码
复制代码 代码如下: <!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body,ul,li,h2,p { margin:0px; pa
-
js日历控件（可精确到分钟）
.menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:170px; z-index:-1; filter: Alpha(Opacity=0);} .cal_table{ border:#333333 solid 1px; border-collapse:collapse; background:#ffffff; font-size:12px} .cal_table td{ border:1px #
-
js编写当天简单日历效果【实现代码】
之前一直很想用javascript写一个日历,但是因为完全没有好的思路, 所以迟迟没有尝试.最近在网上刚好看到用javascript编写的简单日历的例子,代码量虽然不大, 但是我觉得很好地阐述了js日历的实现原理.自己也尝试着做了一下,收获蛮大,掌握了基本的实现原理后,再想增加更多的功能,完全就可以自由发挥了,先在这里分享一下吧,有兴趣的可以试试! 一.表格行数问题 既然要显示日期表格的话,首先得知道这个表格有多少行多少列,列数是已经确定的,从星期天(日历上第1列是星期天)到星期六一共7列.要解
-
JS学习之一个简易的日历控件
这个日历控件类似于园子用的日历,如下图: 这种日历控件实现起来不难,下面简单分析下我的思路: 首先,是该控件的可配置项: 复制代码 代码如下: ... settings: { firstDayOfWeek: 1, baseClass: "calendar", curDayClass: "curDay", prevMonthCellClass: "prevMonth", nextMonthCellClass: "nextMonth&quo
-
JS日历 推荐
两年前写过一个日历,可是兼容性不好. 这次重新写了一次. 兼容多种浏览器 了解了不少东东,特别是对于W3C标准化． 如 FF和IE 对box模型的理解不同 box.style{width:100;border 1px;} ie理解 为 box.width = 100 ff 理解 为 box.width = 100 + 1*2 = 102 可以使用这种方法使两种浏览器都可以正常浏览 box.style{width:100!important; width /**/:120px;bo