首页
所有分类
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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
Jan 23 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 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
json_extract(1) NoSQL(1) 类加载器(1) form表单(1) 变量提升(1) apt命令(1) 缓冲区(1) netty(1) JOIN(1) Launch Mode(1)
You might like
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
Jquery Ajax学习实例4 向WebService发出请求，返回实体对象的异步调用
2010/03/16 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
详解微信小程序框架wepy踩坑记录（与vue对比）
2019/03/12 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
Python设计模式之工厂模式简单示例
2018/01/09 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
python3实现逐字输出的方法
2019/01/23 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python如何删除列为空的行
2020/07/17 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
英国健康和美容技术产品购物网站：CurrentBody
2019/07/17 全球购物
马来西亚排名第一的宠物用品店：Pets Wonderland
2020/04/16 全球购物
死者家属慰问信
2015/03/24 职场文书
js之ajax文件上传
2021/05/13 Javascript
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL