首页
所有分类
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 闭包
Sep 15 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
sortInts(1) feDisplacementMap(1) GUI(2) 数据处理(2) Tkinter(4) agg(1) WebSockets(3) Pool(1) apply(1) Hudi(1)
You might like
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
suggestion开发小结以及对键盘事件的总结（针对中文输入法状态）
2011/12/20 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
asp.net中oracle 存储过程（图文）
2015/08/12 Javascript
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
2019/09/06 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
python 正则式使用心得
2009/05/07 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
详解如何减少python内存的消耗
2019/08/09 Python
pygame实现俄罗斯方块游戏（AI篇2）
2019/10/29 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
高档奢华时装在线目的地：FORWARD by elyse walker
2017/10/16 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
银行优秀员工推荐信
2015/03/24 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL