使用Vue实现简单日历效果

使用Vue实现简单的日历，供大家参考，具体内容如下

原理分析：

1.获取当前时间
2.显示当前时间
3.点击增加和减少月份
4.大月和小月的天数

效果演示

初始样式（显示现在的日期时间）

增加一个月

在程序开始之前一定注意：

引入Vue.js架包

代码演示

Body内容

<script type="text/x-template" id="calendar">
?? <!-- 年份-->
?? ?? ?<div id="year">
?? ??? ? ? ? ??<!--月份 -->
?? ??? ? ? ? ? ? ? ?<div class="month">
?? ??? ? ? ? ? ? ? ? ? ?<ul>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="arrow" @click="pickPre(currentYear,currentMonth)">?</li>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="year-month" @click="pickYear(currentYear,currentMonth)">
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="choosen-year" style="color:blue">{{ currentYear }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span class="choosen-month" style="color:blue">{{ currentMonth }}月</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ?</li>
?? ??? ? ? ? ? ? ? ? ? ? ? ?<li class="arrow" @click="pickNext(currentYear,currentMonth)">?</li>
?? ??? ? ? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ? ? ?</div>
?? ??? ? ? ? ? ? ? ?<!-- 星期 -->
?? ??? ? ? ? ? ? ? ?<ul class="weekdays">
?? ??? ? ? ? ? ? ? ? ? ?<li>一</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>二</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>三</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>四</li>
?? ??? ? ? ? ? ? ? ? ? ?<li>五</li>
?? ??? ? ? ? ? ? ? ? ? ?<li style="color:red">六</li>
?? ??? ? ? ? ? ? ? ? ? ?<li style="color:red">日</li>
?? ??? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ? ? ?<!-- 日期 -->
?? ??? ? ? ? ? ? ? ?<ul class="days">
?? ??? ? ? ? ? ? ? ? ? ?<!-- 循环-->
?? ??? ? ? ? ? ? ? ? ? ?<li v-for="dayobject in days">
?? ??? ? ? ? ? ? ? ? ? ? ? ?<!--本月-->
?? ??? ?
?? ??? ? ? ? ? ? ? ? ? ? ? ?<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ 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="active">{{ dayobject.day.getDate() }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ? ? ?<span v-else>{{ dayobject.day.getDate() }}</span>
?? ??? ? ? ? ? ? ? ? ? ? ? ?</span>
?? ??? ?
?? ??? ? ? ? ? ? ? ? ? ?</li>
?? ??? ? ? ? ? ? ? ?</ul>
?? ??? ? ? ? ? ?</div>
?? ??? ? ? ?</script>
<div id="app">
?? ? ?<calendar></calendar>
</div>

CSS样式

* {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?padding: 0;
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?/*日历*/
?? ??? ?
?? ??? ?#calendar {
?? ??? ? ? ?width: 98%;
?? ??? ? ? ?border: 2px solid #A4A7B0;
?? ??? ? ? ?height: 335px;
?? ??? ? ? ?margin-left: 0.5%;
?? ??? ?}
?? ??? ?
?? ??? ?.month {
?? ??? ? ? ?width: 92%;
?? ??? ? ? ?height: 48px;
?? ??? ? ? ?border: 2px solid #FFFFFF;
?? ??? ? ? ?margin-left: 3%;
?? ??? ? ? ?margin-top: 20px;
?? ??? ?}
?? ??? ?
?? ??? ?.month ul {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?padding: 0;
?? ??? ? ? ?display: flex;
?? ??? ? ? ?margin-top: 11px;
?? ??? ? ? ?justify-content: space-between;
?? ??? ?}
?? ??? ?
?? ??? ?.year-month {
?? ??? ? ? ?flex-direction: column;
?? ??? ? ? ?align-items: center;
?? ??? ? ? ?justify-content: space-around;
?? ??? ?}
?? ??? ?
?? ??? ?.choosen-year {
?? ??? ? ? ?padding: 0 20px;
?? ??? ? ? ?font-size: 16px;
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.choosen-month {
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?font-size: 16px;
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow {
?? ??? ? ? ?width: 3%;
?? ??? ? ? ?height: 25px;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow1 {
?? ??? ? ? ?background: url(left.png) no-repeat 0 0 /100% 100%;
?? ??? ? ? ?margin-left: 44px;
?? ??? ?}
?? ??? ?
?? ??? ?.arrow2 {
?? ??? ? ? ?background: url(right.png) no-repeat 0 0 /100% 100%;
?? ??? ? ? ?margin-right: 44px;
?? ??? ?}
?? ??? ?
?? ??? ?.month ul li {
?? ??? ? ? ?color: #999;
?? ??? ? ? ?font-size: 20px;
?? ??? ? ? ?text-transform: uppercase;
?? ??? ? ? ?letter-spacing: 3px;
?? ??? ? ? ?list-style: none;
?? ??? ?}
?? ??? ?
?? ??? ?.weekdays {
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?color: #FFFFFF;
?? ??? ? ? ?background: #A4A7B0;
?? ??? ? ? ?width: 96.6%;
?? ??? ? ? ?margin-top: 26px;
?? ??? ? ? ?height: 34px;
?? ??? ? ? ?line-height: 34px;
?? ??? ? ? ?margin-left: 2.2%;
?? ??? ?}
?? ??? ?
?? ??? ?.weekdays li {
?? ??? ? ? ?display: inline-block;
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?color: #11616f;
?? ??? ? ? ?font-size: 14px;
?? ??? ? ? ?font-weight: 100;
?? ??? ? ? ?width: 12.7%;
?? ??? ?}
?? ??? ?
?? ??? ?.days {
?? ??? ? ? ?padding: 0;
?? ??? ? ? ?margin: 0;
?? ??? ? ? ?display: flex;
?? ??? ? ? ?flex-wrap: wrap;
?? ??? ? ? ?justify-content: space-around;
?? ??? ?}
?? ??? ?
?? ??? ?.days li {
?? ??? ? ? ?list-style-type: none;
?? ??? ? ? ?display: inline-block;
?? ??? ? ? ?width: 14.2%;
?? ??? ? ? ?text-align: center;
?? ??? ? ? ?padding-bottom: 3px;
?? ??? ? ? ?padding-top: 7px;
?? ??? ? ? ?font-size: 12.78px;
?? ??? ? ? ?color: rgb(14, 220, 235);
?? ??? ? ? ?font-weight: 200;
?? ??? ?}
?? ??? ?
?? ??? ?.days li span span {
?? ??? ? ? ?height: 29.5px;
?? ??? ? ? ?width: 27px;
?? ??? ? ? ?line-height: 29.5px;
?? ??? ? ? ?display: inline-block;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-30 {
?? ??? ? ? ?background: url(bg_30.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-60 {
?? ??? ? ? ?background: url(bg_60.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .class-3060 {
?? ??? ? ? ?background: url(bg_3060.png) no-repeat 0 0 /100% 100%;
?? ??? ?}
?? ??? ?
?? ??? ?.days li .other-month {
?? ??? ? ? ?padding: 5px;
?? ??? ? ? ?color: #84a8ae;
?? ??? ?}

Vue.js内容

Vue测试数据ponent("calendar", {
?? ??? ??? ?template: "#calendar",
?? ??? ??? ?data: function() {
?? ??? ??? ??? ?return {
?? ??? ??? ??? ??? ?currentDay: 1,
?? ??? ??? ??? ??? ?currentMonth: 1,
?? ??? ??? ??? ??? ?currentYear: 1970,
?? ??? ??? ??? ??? ?currentWeek: 1,
?? ??? ??? ??? ??? ?days: [],
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?created() {
?? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ?that.initData(null);
?? ??? ??? ?},
?? ??? ??? ?methods: {
?? ??? ??? ??? ?initData: function(cur) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let leftcount = 0;
?? ??? ??? ??? ??? ?let date;
?? ??? ??? ??? ??? ?if (cur) {
?? ??? ??? ??? ??? ??? ?date = new Date(cur);
?? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ?let now = new Date();
?? ??? ??? ??? ??? ??? ?let d = new Date(that.formatDate(now.getFullYear(), now.getMonth(), 1));
?? ??? ??? ??? ??? ??? ?d.setDate(35);
?? ??? ??? ??? ??? ??? ?date = new Date(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?that.currentDay = date.getDate();
?? ??? ??? ??? ??? ?that.currentYear = date.getFullYear();
?? ??? ??? ??? ??? ?that.currentMonth = date.getMonth() + 1;
?? ??? ??? ??? ??? ?that.currentWeek = date.getDay(); // 1...6,0
?? ??? ??? ??? ??? ?if (that.currentWeek == 0) {
?? ??? ??? ??? ??? ??? ?that.currentWeek = 7;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?let str = that.formatDate(that.currentYear, that.currentMonth, that.currentDay);
?? ??? ??? ??? ??? ?that.days.length = 0;
?? ??? ??? ??? ??? ?//初始化
?? ??? ??? ??? ??? ?for (let i = that.currentWeek - 1; i >= 0; i--) {
?? ??? ??? ??? ??? ??? ?let d = new Date(str);
?? ??? ??? ??? ??? ??? ?d.setDate(d.getDate() - i);
?? ??? ??? ??? ??? ??? ?let dayobject = {};?
?? ??? ??? ??? ??? ??? ?dayobject.day = d;
?? ??? ??? ??? ??? ??? ?that.days.push(dayobject);?
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?for (let i = 1; i <= 35 - that.currentWeek; i++) {
?? ??? ??? ??? ??? ??? ?let d = new Date(str);
?? ??? ??? ??? ??? ??? ?d.setDate(d.getDate() + i);
?? ??? ??? ??? ??? ??? ?let dayobject = {};
?? ??? ??? ??? ??? ??? ?dayobject.day = d;
?? ??? ??? ??? ??? ??? ?that.days.push(dayobject);
?? ??? ??? ??? ??? ?}

?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickPre: function(year, month) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let d = new Date(that.formatDate(year, month, 1));
?? ??? ??? ??? ??? ?d.setDate(0);
?? ??? ??? ??? ??? ?that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickNext: function(year, month) {
?? ??? ??? ??? ??? ?let that = this;
?? ??? ??? ??? ??? ?let d = new Date(that.formatDate(year, month, 1));
?? ??? ??? ??? ??? ?d.setDate(35);
?? ??? ??? ??? ??? ?that.initData(that.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
?? ??? ??? ??? ?},
?? ??? ??? ??? ?pickYear: function(year, month) {
?? ??? ??? ??? ??? ?alert(year + "," + month);
?? ??? ??? ??? ?},
?? ??? ??? ??? ?// 返回 类似 2016-01-02 格式的字符串
?? ??? ??? ??? ?formatDate: function(year, month, day) {
?? ??? ??? ??? ??? ?let y = year;
?? ??? ??? ??? ??? ?let m = month;
?? ??? ??? ??? ??? ?if (m < 10) m = "0" + m;
?? ??? ??? ??? ??? ?let d = day;
?? ??? ??? ??? ??? ?if (d < 10) d = "0" + d;
?? ??? ??? ??? ??? ?return y + "-" + m + "-" + d
?? ??? ??? ??? ?},
?? ??? ??? ?}
?? ??? ?})
?? ??? ?let vm = new Vue({
?? ??? ??? ?el: '#app',
?? ??? ?})

到此程序结束。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于使用Vue实现简单日历效果的详细内容...