广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
示例代码
<template> <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) --> <li class="arrow hands el-icon-arrow-left" @click="pickPre(currentYear, currentMonth)" ></li> <li class="year-month"> <span class="choose-year">{{ currentYear }}年</span> <span class="choose-month">{{ currentMonth }}月</span> </li> <li class="arrow hands el-icon-arrow-right" @click="pickNext(currentYear, currentMonth)" ></li> </ul> </div> <!-- 星期 --> <ul class="weekdays"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <!-- 日期 --> <ul class="days"> <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 --> <li v-for="(dayobject, i) in days" :key="i"> <!--本月--> <!--如果不是本月 改变类名加灰色--> <span v-if="dayobject.day.getMonth() + 1 != currentMonth" class="other-month" @click="getDayTime(dayobject.day)" > {{ dayobject.day.getDate() }} </span> <!--如果是本月 还需要判断是不是这一天--> <span v-else> <!--今天 同年同月同日--> <span v-if=" dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate() " :class="newDate == newsss ? 'active' : ''" @click="getDayTime(dayobject.day, i)" > {{ dayobject.day.getDate() }} </span> <span v-else @click="getDayTime(dayobject.day, i)" :class="newDate == dayobject.day ? 'active' : ''" > {{ dayobject.day.getDate() }} </span> </span> </li> </ul> </div></template><script>export default { data() { return { currentDay: 1, currentMonth: 1, currentYear: 2021, currentWeek: 1, days: [], newDate: this.$formatDateYMD(new Date()), newsss: this.$formatDateYMD(new Date()), }; }, created: function () { // 在vue初始化时调用 this.initData(null); }, methods: { initData: function (cur) { // var leftcount = 0 // 存放剩余数量 var date; if (cur) { date = new Date(cur); } else { var now = new Date(); var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1)); d.setDate(35); date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); } this.currentDay = date.getDate(); this.currentYear = date.getFullYear(); this.currentMonth = date.getMonth() + 1; this.currentWeek = date.getDay(); // 1...6,0 if (this.currentWeek === 0) { this.currentWeek = 7; } var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay); this.days.length = 0; // 今天是周日，放在第一行第7个位置，前面6个 // 初始化本周 for (var i = this.currentWeek; i >= 0; i--) { var d2 = new Date(str); d2.setDate(d2.getDate() - i); var dayobjectSelf = {}; // 用一个对象包装Date对象 以便为以后预定功能添加属性 dayobjectSelf.day = d2; this.days.push(dayobjectSelf); // 将日期放入data 中的days数组 供页面渲染使用 } // 其他周 for (var j = 1; j <= 35 - this.currentWeek; j++) { var d3 = new Date(str); d3.setDate(d3.getDate() + j); var dayobjectOther = {}; dayobjectOther.day = d3; this.days.push(dayobjectOther); } }, getDayTime(el, index) { this.newDate = el; console.log(el) }, pickPre: function (year, month) { // setDate(0); 上月最后一天 // setDate(-1); 上月倒数第二天 // setDate(dx) 参数dx为 上月最后一天的前后dx天 var d = new Date(this.formatDate(year, month, 1)); d.setDate(0); this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); }, pickNext: function (year, month) { var d = new Date(this.formatDate(year, month, 1)); d.setDate(35); this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1)); }, // 返回 类似 2022-05-17 格式的字符串 formatDate: function (year, month, day) { var y = year; var m = month; if (m < 10) m = "0" + m; var d = day; if (d < 10) d = "0" + d; return y + "-" + m + "-" + d; }, },};</script><style>#calendar { font-size: 12px; width: 100%; margin: 0 auto; background: #ecf6ff;}.month { width: 100%; color: #333333;}.month ul { margin: 0; padding: 0; display: flex; justify-content: space-between; height: 35px;}.year-month { display: flex; align-items: center; justify-content: space-around; margin-top: 10px;}.choose-month { text-align: center; font-size: 12px;}.arrow { padding: 15px; color: #999999;} .month ul li { font-size: 12px; text-transform: uppercase; letter-spacing: 3px;}.weekdays { margin: 0; padding: 10px; display: flex; flex-wrap: wrap; color: #999; justify-content: space-around;}.weekdays li { display: inline-block; width: 13.6%; text-align: center;}.days { padding: 10px; margin: 0; display: flex; flex-wrap: wrap;}.days li { list-style-type: none; display: inline-block; width: 14.2%; text-align: center; padding-bottom: 4px; padding-top: 10px; font-size: 12px; color: #000;}.days li .active { padding: 6px 10px; border-radius: 50%; background: #00b8ec; color: #fff;}.days li .other-month { padding: 5px; color: gainsboro;}.days li:hover > span > span { padding: 6px 10px; border-radius: 50%; background: #00b8ec; color: #fff; cursor: pointer;}</style>登录后复制注意：在运行过程中可能会出现一点小问题，这里我用到了一个日期处理类库 moment.js,如需安装请执行以下命令安装moment.js插件，在main.js 全局配置。
npm install moment --save登录后复制
main.js
import Vue from 'vue'import Moment from 'moment';Vue.prototype.$Moment = Moment;Vue.prototype.$formatDateYMD = function(date) { return Moment(date).format('YYYY-MM-DD')}登录后复制相关推荐：【JavaScript视频教程】
以上就是教你用js实现日历功能（附代码示例）的详细内容，更多请关注9543建站博客其它相关文章！
发表评论