Vue自定义日历小控件使用方法详解
更新时间：2022年08月29日 16:08:43 作者：一脸聪明
这篇文章主要为大家详细介绍了Vue自定义日历小控件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue自定义日历小控件的具体代码，供大家参考，具体内容如下
废话少说，先上效果图：
可以在效果图中看到，选择不同的月份的时候当月天数与星期几都是一一对应，非当月天数则是灰色显示，一目了然。
并且此日历控件支持自动确定当前时间，每次打开默认显示的就是最新的月份，用来做签到打卡的功能比较合适。
由于使用的是原生div进行制作，自定义功能非常强，可以自由的更换样式、背景、颜色、大小等等。
在与数据库的时候可以从数据库获得时间信息并填充到控件中，图中的色块就可以看出。
该控件使用了Vue、CSS、以及最原生的div实现了自定义的样式，不得不说，div在自定义这一块是真的太给力了。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>日历控件</title>
<script src="./vue.js"></script>
</head>
<style>
.writer-upper-right {
float: left;
width: 333px;
height: 300px;
border: 2px orange solid;
border-radius: 7px;
}
.calendar-head {
width: 100%;
height: 15%;
border-radius: 7px;
}
.calendar-body {
width: 99.9%;
height: 84.9%;
border-radius: 7px;
border-top: 1px orange solid;
}
.calendar-head-title {
float: left;
width: 100px;
height: 79%;
line-height: 33px;
border-radius: 7px;
border: 2px orange solid;
margin-top: 2px;
margin-left: 1px;
text-align: center;
color: orange;
font-size: 21px;
}
.calendar-head-year {
float: left;
margin-left: 9px;
width: 100px;
height: 79%;
border-radius: 7px;
border: 2px orange solid;
margin-top: 2px;
color: orange;
text-align: center;
}
.select-calendar-year {
float: left;
width: 100%;
height: 100%;
border: none;
background: none;
color: orange;
text-indent: 0.7em;
font-size: 20px;
}
.select-calendar-year:focus {
outline: none;
}
.select-calendar-year:hover {
cursor: pointer;
}
.calendar-body-week {
width: 99.8%;
height: 32px;
margin: 0 auto;
border-bottom: 1px orange solid;
}
.calendar-body-days {
width: 99.8%;
height: 199px;
border-bottom: 1px orange solid;
border-top: none;
border-radius: 7px;
}
.calendar-body-info {
width: 99.8%;
height: 18px;
border-radius: 7px;
}
.weekEveryDay {
float: left;
width: 40px;
height: 23px;
margin-left: 5px;
margin-top: 4px;
border: 1px orange solid;
border-radius: 5px;
line-height: 23px;
text-align: center;
font-size: 15px;
color: orange;
}
.monthEveryDay {
margin-top: 7px;
}
.not-now-month {
border-color: gray;
color: gray;
}
.now-day-writer {
background-color: orange;
color: black;
}
.now-day-not-writer {
border-color: gray;
background-color: gray;
color: black;
}
.info-if-writer {
float: left;
width: 60px;
height: 16px;
margin-left: 5px;
margin-top: 1px;
}
.color-span {
float: left;
width: 15px;
height: 15px;
margin-top: 1px;
background-color: gray;
}
.color-info {
float: left;
width: 40px;
height: 15px;
margin-top: 1px;
margin-left: 5px;
line-height: 15px;
text-align: left;
font-size: 12px;
color: gray;
}
.color-span2 {
background-color: orange;
}
.color-info2 {
color: orange;
}
</style>
<body style="background: url('./bg-xk.gif');margin: 100px 100px;">
<div id="app">
<div class="writer-upper-right">
<div class="calendar-head">
<div class="calendar-head-title">日历控件</div>
<div class="calendar-head-year">
<label>
<select class="select-calendar-year" v-model="calendarYear" @change="SelectCalendarYear">
<option v-for="year in calendarAllYear" :value="year" :key="year">{{year}}年</option>
</select>
</label>
</div>
<div class="calendar-head-year">
<label>
<select class="select-calendar-year" v-model="calendarMonth" @change="SelectCalendarMonth">
<option v-for="month in calendarAllMonth" :value="month" :key="month">{{month}}月</option>
</select>
</label>
</div>
</div>
<div class="calendar-body">
<div class="calendar-body-week">
<div class="weekEveryDay">SUN</div>
<div class="weekEveryDay">MON</div>
<div class="weekEveryDay">TUE</div>
<div class="weekEveryDay">WED</div>
<div class="weekEveryDay">THU</div>
<div class="weekEveryDay">FRI</div>
<div class="weekEveryDay">SAT</div>
</div>
<div class="calendar-body-days">
<div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarPrevDays" disabled>{{day}}</div>
<div class="weekEveryDay monthEveryDay"
v-for="day in calendarNowDays"
:class="['weekEveryDay monthEveryDay', {'now-day-writer' : calendarHadWrite.includes(day)}, {'now-day-not-writer' : calendarNotWrite.includes(day)}]"
>{{day}}</div>
<div class="weekEveryDay monthEveryDay not-now-month" v-for="day in calendarNextDays" disabled>{{day}}</div>
</div>
<div class="calendar-body-info">
<div class="info-if-writer">
<div class="color-span"></div>
<div class="color-info">未更新</div>
</div>
<div class="info-if-writer">
<div class="color-span color-span2"></div>
<div class="color-info color-info2">有更新</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
网站底部版权信息区可以用bootstrap的“栅格系统”完成，下面给大家分享一个未经处理的底部版权信息区的样式，大家可以做个参考2016-12-12
浅谈javascript的Array.prototype.slice.call
发现大多人都用了Array.prototype.slice.call(argments,0)，一直不明白这句是干什么的。而昨天温习了slice()方法，再参考Function.call(thisArg[, arg1[, arg2[, ...]]])，还是不得而知（我脑筋转得慢:|）。2015-08-08
javascript删除元素节点removeChild()用法实例
这篇文章主要介绍了javascript删除元素节点removeChild()用法,实例分析了removeChild()方法移除节点的使用技巧,需要的朋友可以参考下2015-05-05
JavaScript将Table导出到Excel实现思路及代码
将Table导出到Excel不是一件困难的事，很多语言都可以实现，本文主要介绍下使用JavaScript实现将table导出到excel，思路很清晰感兴趣的你不妨参考下哈2013-03-03
这篇文章主要介绍了javascript实现简单查找与替换的方法,涉及javascript针对页面查找与替换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JS实现向表格中动态添加行的方法,涉及javascript针对表格行的动态添加技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
这篇文章主要介绍了ES6中的class是如何实现的？(附Babel编译的ES5代码详解)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
本文讲一下js实现兼容IE6/7/8,firefox,chrome浏览器的回车和鼠标焦点事件的代码。2010-04-04
javascript alert函数的替代方案，一个自定义的对话框的方法2010-03-03
这篇文章主要为大家详细介绍了js+cavans实现图片滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论