怎么用js实现日历功能的呢，代码是什么
导读：这篇文章给大家介绍了“怎么用js实现日历功能的呢，代码是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“怎么用js实现日历功能的呢，代码是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起...
这篇文章给大家介绍了“怎么用js实现日历功能的呢，代码是什么”的相关知识，讲解详细，步骤过程清晰，对大家进一步学习和理解“怎么用js实现日历功能的呢，代码是什么”有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。
示例代码
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')
}
关于“怎么用js实现日历功能的呢，代码是什么”的内容就介绍到这，感谢各位的阅读，相信大家对怎么用js实现日历功能的呢，代码是什么已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 怎么用js实现日历功能的呢，代码是什么
本文地址： https://pptw.com/jishu/653426.html