Vue生成日历,根据返回值将日期标红

HTML:

<h1>CSS 日历</h1>
<div id="calendar">
<div class="month">
<ul>
<!-- <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> -->
<li class="year-month" @click="pickYear(currentYear,currentMonth)">
<span class="choose-year">{{ currentYear +'/'+currentMonth}}</span>
<!-- <span class="choose-month">{{ 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 @click="pick(day)" v-for="day in days">
<!--今天-->
<span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span>
<span v-else>
<!--今天-->
<span :class="{active:j(day.getFullYear(),day.getMonth()+1,day.getDate())}">{{ day.getDate() }}</span>
<!-- <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span> -->
<!-- <span v-else>{{ day.getDate() }}</span> -->
</span>
</li>
</ul>
</div>
 
 
css:
<style type="text/css">
* {
box-sizing: border-box;
}
 
ul {
list-style-type: none;
}
 
body {
font-family: Verdana, sans-serif;
background: #E8F0F3;
}
 
#calendar {
width: 560px;
height: 400px;
margin: 0 auto;
border: 2px solid #000;
background: #fafafa;
}
 
.month {
width: 100%;
height: 60px;
}
 
.year-month {
height: 60px;
text-align: center;
line-height: 60px;
font-size: 26px;
}
 
.weekdays {
margin: 0;
padding: 6px 20px;
background-color: #f2f2f2;
display: flex;
color: #333;
justify-content: space-around;
}
 
.weekdays li {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 18px;
font-weight: bold;
}
 
.days {
padding: 15px 20px;
background: #FFFFFF;
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: 4px 0;
font-size: 16px;
color: #000;
}
 
.days li .active {
border-radius: 50%;
background: red;
color: #fff;
}
 
.days li span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-weight: bold;
}
 
.days li .other-month {
color: gainsboro;
}
 
.days li:hover {
background: #e1e1e1;
}
</style>
 
javascript:
 
<script type="text/javascript">
new Vue({
el: '#calendar',
data: {
currentDay: 1,
currentMonth: 1,
currentYear: 1970,
currentWeek: 1,
days: [],
addDay: [],
},
created: function() {
this.initData(null);
var $this = this;
//请求数据
$.ajax({
url: "这里填接口名称",
type: "POST",
data: {
name: '',
params: ''
},
dataType: "json",
async: false,
success: function(data) {
console.log(data);
$this.addDay = data;
},
error: function(xhr) {
console.log(xhr);
}
});
},
methods: {
j: function(y, m, d) {
//将传入的参数转换成字符串,作比较
var Y = y.toString();
var M = m < 10 ? '0' + m : m.toString();
var D = d < 10 ? '0' + d : d.toString();
//判断日历日期跟数据返回日期做对比
for (var i = 0; i < this.addDay.length; i++) {
if (toData(this.addDay[i]['日历日期']) == (Y + M + D)) {
return true
}
}
function toData(date) { //将时间戳转化成标准的日期格式
if (date == null) {
return "";
}
var ndate = new Date(date);
var Y = ndate.getFullYear();
var M = (ndate.getMonth() + 1 < 10 ? '0' + (ndate.getMonth() + 1) : ndate.getMonth() + 1);
var D = (ndate.getDate() < 10 ? '0' + (ndate.getDate()) : ndate.getDate());
ndate = Y + M + D;
return ndate;
}
},
initData: function(cur) {
var date;
if (cur) {
date = new Date(cur);
} else {
date = new Date();
}
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);
// console.log("today:" + str + "," + this.currentWeek);
this.days.length = 0;
// 今天是周日,放在第一行第7个位置,前面6个
for (var i = this.currentWeek - 1; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
// console.log("y:" + d.getDate());
this.days.push(d);
}
for (var i = 1; i <= 35 - this.currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
this.days.push(d);
}
},
pick: function(date) {
alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()));
},
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));
},
pickYear: function(year, month) {
alert(year + "," + month);
},
// 返回 类似 2016-01-02 格式的字符串
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>
 

Vue日历的更多相关文章

  1. 多功能版vue日历控件

    下载地址:https://pan.baidu.com/s/1nvpx0tB5cIvvqHuApz_MpQ 之前写了一个简单的vue日历控件:https://www.cnblogs.com/mrzhu/ ...

  2. vue 日历组件只显示本月和下个月 -- 多选日期

    效果就是上图 代码贴出 1.在components > calander > index.vue <template> <div class="page&quo ...

  3. vue日历/日程提醒/html5本地缓存

    先上图 功能: 1.上拉日历折叠,展示周 2.左右滑动切换月 2.“今天”回到今天:“+”添加日程 3.localStorage存储日程 index,html <body> <div ...

  4. vue 日历组件

    Github 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件 npm i vue-calendar-component --save cnpm i vue-cal ...

  5. vue自定义日期选择,类似美团日期选择,日历控件,vue日历区间选择

    一个日历的控件,基于vue的,可以日历区间选择,可用于酒店日历区间筛选,动手能力强,可以修改成小程序版本的,先上效果图 里面的颜色样式都是可以修改的 选择范围效果 话不多说,直接上干货,代码可以直接复 ...

  6. vue日历控件,自定义选择年月 选择年月日 选择年月日时 选择年月日时分,自定义日期范围

    下载地址:https://pan.baidu.com/s/1iEZl4kDkEg4ybwqc7aI7vQ 注:功能更加全面的日历控件请访问:https://www.cnblogs.com/mrzhu/ ...

  7. Vue日历组件的功能

    本来呢,开开心心的写完了这个功能,然后发现elemeng更新了,增加了日历组件这个功能 我的内心机器奔溃,但是,element的日历组件太简单了,我感觉还是手撸一个吧,毕竟也不是很难 实现了显示农历, ...

  8. VUE 日历签到

    <style lang="scss"> @import "../assets/css/px2rem.scss"; .sign-box { width ...

  9. vue日历(纯 js,没用任何插件和组件)

    效果图: 代码:   <template> <div class="calender"> <div class="top"> ...

随机推荐

  1. centos6.x禁用ipv6的方法

    注意可能有两个网卡的情况,修改当前网卡才有效. cd /etc/sysconfig/network-scripts/ ls ifcfg-Auto_eth0 ifcfg-eth0 现在ipv6没流行,几 ...

  2. 11.Weblogic-SSRF漏洞复现

    应为这一阵正好在学习SSRF漏洞,又苦于本人太菜没有挖到SSRF,只能复现... 先贴出很早之前央视网SSRF可窥探内网(Weblogic SSRF案例):https://www.secpulse.c ...

  3. hdu1072

    #include <iostream> #include <cstdio> #include <cstring> #include <queue> us ...

  4. 【Qt官方例程学习笔记】Raster Window Example(画笔的平移/旋转/缩放应用)

    这个例子显示了如何使用QPainter渲染一个简单的QWindow. 值得学习的内容 <QtGui>头文件 #include <QtGui>就可以使用Qt GUI模块中的所有类 ...

  5. win7 失去焦点解决方案

    将HKEY_CURRENT_USER\Control Panel\Desktop中的ForegroundLockTimeout的选项,改成十进制的200000毫秒或者十六进制30d40. 参考链接: ...

  6. SqlDataReader

    using (mycon) { //using语句与try catch finally结合使用 mycon.Open(); // MessageBox.Show("dakai"); ...

  7. 使用idrac远程管理卡操作安装Centos

    浏览器打开远程管理网卡地址(浏览器建议用IE,本次用的IE11,其他浏览器可能不能用) 1.首先设置虚拟控制台插件类型(推荐该为本地) 点击启动后,可能会弹窗,选择允许 2.添加镜像 创建虚拟介质 连 ...

  8. Unity 动画系统目录

    引言 提到动画,你想到的是什么? 图片在循环播放构成的动画.UI物体的循环变色.2D 3D物体在循环运动.链条弹簧的运动.3D的玩家在行走奔跑挥剑.非人形的运动... 动画实现方式的分类 动画实现的方 ...

  9. 2017 ACM/ICPC Asia Regional Shenyang Online number number number

    题意:求n个斐波那契数列组合都无法得到的最小数字 解法: 1 我们先暴力的求出前面几个数字 2 然后再暴力的求递推 3 接着矩阵快速幂(没写错吧?) /*#include<bits/stdc++ ...

  10. centos7虚拟机安装

    Centos7 第1章 CENTOS 7 简介 1.1 centos的演变 启动流程sysvinit 串行启动:一次一个, 一个一个启动 并行启动:全部的一起启动 init优点 运行非常良好.主要依赖 ...