首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue.js创建Calendar日历效果

Posted in Javascript onNovember 03, 2016

使用 Vue.js 进行数据与视图的绑定，数据更新会让视图自动进行更新，类似 Android 里面的 DataBinding。
实现一个HTML的日历效果。

Vue.js创建Calendar日历效果

Vue.js创建Calendar日历效果

html 部分

<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 }}</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 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>

id 为 calendar 对应的创建一个 Vue 对象，设置 el 为 ‘#calendar'。

<script type="text/javascript">
 new Vue({
 el: '#calendar',
 data: {
 currentDay: 1,
 currentMonth: 1,
 currentYear: 1970,
 currentWeek: 1,
 days: [],
 },
 created: function() {
 this.initData(null);
 },
 methods: {
 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>

完整代码：

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>日历</title>
 <style type="text/css">
 * {
 box-sizing: border-box;
 }
 
 ul {
 list-style-type: none;
 }
 
 body {
 font-family: Verdana, sans-serif;
 background: #E8F0F3;
 }
 #calendar{
 width:80%;
 margin: 0 auto;
 box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
 }
 .month {
 width: 100%;
 background: #00B8EC;
 }
 
 .month ul {
 margin: 0;
 padding: 0;
 display: flex;
 justify-content: space-between;
 }
 
 .year-month {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-around;
 }
 
 .year-month:hover {
 background: rgba(150, 2, 12, 0.1);
 }
 
 .choose-year {
 padding-left: 20px;
 padding-right: 20px;
 }
 
 .choose-month {
 text-align: center;
 font-size: 1.5rem;
 }
 
 .arrow {
 padding: 30px;
 }
 
 .arrow:hover {
 background: rgba(100, 2, 12, 0.1);
 }
 
 .month ul li {
 color: white;
 font-size: 20px;
 text-transform: uppercase;
 letter-spacing: 3px;
 }
 
 .weekdays {
 margin: 0;
 padding: 10px 0;
 background-color: #00B8EC;
 display: flex;
 flex-wrap: wrap;
 color: #FFFFFF;
 justify-content: space-around;
 }
 
 .weekdays li {
 display: inline-block;
 width: 13.6%;
 text-align: center;
 }
 
 .days {
 padding: 0;
 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-bottom: 15px;
 padding-top: 15px;
 font-size: 1rem;
 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 {
 background: #e1e1e1;
 }
 </style>
 </head>
 <body>
 <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 }}</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 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>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 new Vue({
 el: '#calendar',
 data: {
  currentDay: 1,
  currentMonth: 1,
  currentYear: 1970,
  currentWeek: 1,
  days: [],
 },
 created: function() {
  this.initData(null);
 },
 methods: {
  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>
 </body>
</html>

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

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

Vue.js创建Calendar日历效果

- Author -

Hanks

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript Konami Code 实现代码
Jul 29 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
PassWord输入框代码分享
Jun 07 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 #Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 #Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 #Javascript
动静分离(1) 生成缩略图(1) 默认端口(3) 二级域名(1) 防盗链(1) reload(1) shell(3) 负载均衡(6) 前后端分离(1) 反向代理(2)
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
php实现计算百度地图坐标之间距离的方法
2016/05/05 PHP
PHP pear安装配置教程
2016/05/14 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
子页向父页传值示例
2013/11/27 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
JS中Location使用详解
2015/05/12 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
浅谈node的事件机制
2017/10/09 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python设计模式之代理模式实例
2014/04/26 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
PyQt5组件读取参数的实例
2019/06/25 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python 进程操作之进程间通过队列共享数据，队列Queue简单示例
2019/10/11 Python
澳大利亚领先的优质葡萄酒拍卖会：Langton’s Fine Wines
2019/03/24 全球购物
巴西本土电商平台：Americanas
2020/06/21 全球购物
2014年幼儿园植树节活动方案
2014/03/02 职场文书
宣传标语大全
2014/07/01 职场文书
庆六一宣传标语
2014/10/08 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android