首页
所有分类
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 相关文章推荐
setAttribute 与 class冲突解决
Feb 17 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 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
Pillow(2) 蒙特卡罗(1) bufio(1) vue-esign(1) map(4) 微信小程序(9) WeUI(1) pdfkit(1) 结构体(1) 指针(1)
You might like
2020年4月放送！《Princess Connect Re:Dive》制作组 & 角色声优公开！
2020/03/06 日漫
如何冲泡挂耳包咖啡？技巧是什么
2021/03/04 冲泡冲煮
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
PHP的博客ping服务代码
2012/02/04 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
CSS+Table图文混排中实现文本自适应图片宽度（超简单+跨所有浏览器）
2009/02/14 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
Vue响应式原理详解
2017/04/18 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
vue上传图片到oss的方法示例（图片带有删除功能）
2018/09/27 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
详解datagrid使用方法（重要）
2020/11/06 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
美国最受欢迎的童装品牌之一：The Children’s Place
2016/07/23 全球购物
打印机墨盒：123Inkjets
2017/02/16 全球购物
美国家庭鞋店：Shoe Sensation
2019/09/27 全球购物
网上书店创业计划书
2014/01/12 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
卫生巾广告词
2014/03/18 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
上甘岭观后感
2015/06/10 职场文书
JS 基本概念详细介绍
2021/10/16 Javascript