js日歷相關(guān)函數(shù)使用詳解
更新時(shí)間：2022年04月18日 11:48:29 作者：_yangyi
這篇文章主要為大家詳細(xì)介紹了js日歷相關(guān)函數(shù)的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js日歷相關(guān)函數(shù)的具體代碼，供大家參考，具體內(nèi)容如下
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) {
? ? ?//計(jì)算當(dāng)年一月第一天是周幾
? ? ?let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay())
? ? ?//計(jì)算某天是第幾周
? ? ?let dateDay = year + '-' + month + '-' + day
? ? ?let d1 = new Date(dateDay)
? ? ?let d2 = new Date(dateDay)
? ? ?d2.setMonth(0)//設(shè)置月份
? ? ?d2.setDate(0)//設(shè)置一月中的第一天
? ? ?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: [],//左側(cè)日歷
? ? ? ? ? ? ? ? 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 => {
? ? ? ? ? ? ? ? ? ? ? ? ? ? /*判斷每月幾周對(duì)應(yīng)是一年的第幾周*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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) {
? ? ? ? ? ? ? ? //計(jì)算當(dāng)年一月第一天是周幾
? ? ? ? ? ? ? ? let yearFirstDay = Number(new Date(year + '-' + 1 + '-' + 1).getDay())
? ? ? ? ? ? ? ? //計(jì)算某天是第幾周
? ? ? ? ? ? ? ? let dateDay = year + '-' + month + '-' + day
? ? ? ? ? ? ? ? let d1 = new Date(dateDay)
? ? ? ? ? ? ? ? let d2 = new Date(dateDay)
? ? ? ? ? ? ? ? d2.setMonth(0)//設(shè)置月份
? ? ? ? ? ? ? ? d2.setDate(0)//設(shè)置一月中的第一天
? ? ? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? /*上級(jí)選擇時(shí)間范圍渲染日歷*/
? ? ? ? ? ? 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
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? /*處理結(jié)束月*/
? ? ? ? ? ? ? ? ? ? ? ? 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
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? /*點(diǎn)擊某一月事件*/
? ? ? ? ? ? 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)
? ? ? ? ? ? },
? ? ? ? ? ? /*點(diǎn)擊某一周事件*/
? ? ? ? ? ? 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)
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? //點(diǎn)擊當(dāng)前具體時(shí)間
? ? ? ? ? ? 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)
? ? ? ? ? ? },
? ? ? ? ? ? /*數(shù)組根據(jù)某個(gè)字段去重*/
? ? ? ? ? ? unique(arr, val) {
? ? ? ? ? ? ? ? const res = new Map()
? ? ? ? ? ? ? ? return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1))
? ? ? ? ? ? },
? ? ? ? ? ? /*根據(jù)某字段排序*/
? ? ? ? ? ? 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
? ? ? ? ? ? ? ? ? ? ? ? ? ? /*賦值有日志的圖標(biāo)*/
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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>組件調(diào)用
<Calendar :year="year" :startDay="startDay" :endDay="endDay" ref="Calendar" @getValue="getCalendarValue"></Calendar>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型詳解
Error是JavaScript中最原始的錯(cuò)誤對(duì)象，作為各種異常的基礎(chǔ)對(duì)象，還有多個(gè)衍生的具體的錯(cuò)誤類型，這些錯(cuò)誤對(duì)象類型在nodejs中也可應(yīng)用，這篇文章主要介紹了JavaScript中的Error錯(cuò)誤對(duì)象與自定義錯(cuò)誤類型,需要的朋友可以參考下2022-12-12
javascript文件加載管理簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了javascript文件加載管理簡(jiǎn)單實(shí)現(xiàn)方法,可實(shí)現(xiàn)順序加載所有js文件的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-07-07
微信小程序國(guó)際化探索實(shí)現(xiàn)(附源碼地址)
這篇文章主要介紹了微信小程序國(guó)際化探索實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了javascript封裝的sqlite操作類,可實(shí)現(xiàn)SQLite數(shù)據(jù)庫(kù)的初始化及執(zhí)行SQL語(yǔ)句的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
本篇文章主要介紹了詳解Javascript獲取緩存和清除緩存API，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
6個(gè)DIV 間隔一秒 輪番進(jìn)行奇偶顯示. 比如先135 一秒后 246 然后再135 循環(huán)2010-07-07
javascript強(qiáng)制彈出新窗口實(shí)現(xiàn)代碼
javascript強(qiáng)制彈出新窗口，主要是利用的動(dòng)態(tài)創(chuàng)建鏈接。2009-12-12
這篇文章主要介紹了原生js實(shí)現(xiàn)拖拽功能基本思路詳解,而拖拽的基本原理就是根據(jù)鼠標(biāo)的移動(dòng)來(lái)移動(dòng)被拖拽的元素。需要的朋友可以參考下2018-04-04
JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
filter也是一個(gè)常用的操作，它用于把Array的某些元素過(guò)濾掉，然后返回剩下的元素。下面通過(guò)實(shí)例代碼給大家簡(jiǎn)答介紹下javascript中的filter，需要的的朋友參考下吧2017-06-06
js，jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
這篇文章主要介紹了如何通過(guò)js或jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置,需要的朋友可以參考下2014-06-06