用vue写一个日历


Posted in Javascript onNovember 02, 2020

之前在上家公司做过一个公司人员考勤的东西,里面需要用到日历,当时自己用vue随便写了一个,比较简单,删掉了其他功能的代码,只留下日历,直接看代码

<template>
 <div class="lookForMonth_wrapper">
  <div class="lookForMonth_top">
   <div class="selectDate">
    <div>{{year}} 年 {{month}} 月</div>
    <div class="upDownSelect">
     <div class="upDownSelect_item" @click="dateUp"></div>
     <div class="upDownSelect_item" @click="dateDown"></div>
    </div>
   </div>
  </div>
  <div class="calendar" :style="calendarStyle">
   <div v-for="(item,index) in calendarData" class="calendar_item" :key='index' :class="{ash:item.color==='ash',date:index>6&&item.color!=='ash'}">
    <p class="dateEdit">{{item.label}}<i class="el-icon-edit-outline" v-if="item.color!=='ash'&&index>=7"></i></p>
    <p v-if='index>6'>上班</p> // 打工人
   </div>
  </div>
 </div>
</template>
<script>
export default {
 name: "lookForMonth",
 data: () => {
 return {
  calendarData: [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}], //日历循环渲染数据
  year: 0, //当前日期年
  month: 0, //当前日期月数
  date: 0, //当前日期号数
  day: -1, //当前星期几
 };
 },
 filters:{
 },
 computed: {
 // 根据当月日期详情更改日历表格高度
 calendarStyle() {
  if (this.calendarData.length > 42) {
  return "height: 701px;";
  } else {
  return "height: 601px;";
  }
 }
 },
 async created(){
 // 获取当前日期数据
 this.getNow();
 // 获取当前月份一号的时间戳
 let firstTime = +new Date(this.year,this.month-1,1,0,0,0)
 this.getCalendarDate(); // 给calendarData添加当月数据
 },
 mounted() {
 },
 methods: {
 // 获取当前时间
 getNow() {
  let now = new Date()
  this.year = +now.getFullYear()
  this.month = +now.getMonth() + 1
  this.date = +now.getDate()
  this.day = +now.getDay()
 },
 // 获取每个月的天数
 monthDay(month) {
  if ([1,3,5,7,8,10,12].includes(month)) {
  return 31
  } else if ([4,6,9,11].includes(month)) {
  return 30
  } else if (month === 2) {
  // 判断当年是否为闰年
  if (
   (this.year % 4 === 0 && this.year % 100 !== 0) ||
   this.year % 400 === 0
  ) {
   return 29
  } else {
   return 28
  }
  }
 },
 // 给calendarData添加当月数据
 getCalendarDate() {
  // 获取当前月份一号星期几
  let firstDay = new Date(this.year + "-" + this.month + "-" + "01").getDay();
  this.calendarData = [{label:"日"},{label: "一"}, {label:"二"},{label: "三"},{label: "四"},{label: "五"},{label: "六"}];
  let num = parseInt(firstDay);
  let nowDays = this.monthDay(this.month);
  let lastMonth = this.month - 1>0?this.month - 1:12;
  let lastDays = this.monthDay(lastMonth);
  // 循环添加上一个月数据
  for (let i = 0; i < num; i++) {
  this.calendarData.push({label:lastDays - num + i + 1,color:'ash'});
  }
  // 循环添加当月数据
  for (let i = 0; i < nowDays; i++) {
  this.calendarData.push({label:i + 1});
  }
  // 循环添加下一个月数据
  if (this.calendarData.length % 7 !== 0) {
  let surplusDay = 7 - (this.calendarData.length % 7);
  for (let i = 0; i < surplusDay; i++) {
   this.calendarData.push({label:i + 1,color:'ash'});
  }
  }
  this.loading = false
 },
 // 将日期调上
 dateUp() {
  this.month--;
  if (this.month <= 0) {
  this.year--;
  this.month = 12;
  }
  this.getCalendarDate(); // 给calendarData添加当月数据
 },
 // 将日期调下
 dateDown() {
  this.month++;
  if (this.month > 12) {
  this.year++;
  this.month = 1;
  }
  this.getCalendarDate(); // 给calendarData添加当月数据
 },
 }
};
</script>
<style lang="scss" scoped>
.lookForMonth_wrapper {
 padding: 20px;
 width: 701px;
 margin: auto;
}
.lookForMonth_top {
 margin-bottom: 20px;
 overflow: hidden;
 .selectTeacher {
 float: left;
 }
 .selectDate {
 height: 30px;
 line-height: 30px;
 float: right;
 display: flex;
 .upDownSelect {
  display: flex;
  flex-direction: column;
  margin-top: -2px;
  margin-left: 5px;
  .upDownSelect_item {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  cursor: pointer;
  }
  .upDownSelect_item:nth-child(1) {
  border-bottom: 7px solid #666;
  margin-bottom: 5px;
  &:hover {
   border-bottom: 7px solid skyblue;
  }
  }
  .upDownSelect_item:nth-child(2) {
  border-top: 7px solid #666;
  &:hover {
   border-top: 7px solid skyblue;
  }
  }
 }
 }
}
/* 日历表样式=======================================↓ */
.calendar {
 width: 701px;
 border-top: 1px solid #ccc;
 border-left: 1px solid #ccc;
 display: flex;
 flex-wrap: wrap;
 box-sizing: border-box;
 .calendar_item {
 box-sizing: border-box;
 width: 100px;
 height: 100px;
 border-right: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
 text-align: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 &.date:hover{
  background: #eee;
 }
 .status{
  margin-top: 10px;
  &.textBlue{
  color: blue;
  }
  &.textRed{
  color: brown;
  }
 }
 .el-icon-edit-outline{
  cursor: pointer;
  margin-left: 7px;
 }
 }
 .ash{
 color: gainsboro;
 }
 .dateEdit{
 margin-bottom: 10px;
 }
}
</style>

效果如下:

用vue写一个日历

以上就是利用vue写一个日历的详细内容,更多关于vue 日历的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 动态生成方法的例子
Jul 22 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 #Javascript
vant自定义二级菜单操作
Nov 02 #Javascript
JavaScript动态生成表格的示例
Nov 02 #Javascript
JavaScript实现图片放大预览效果
Nov 02 #Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 #Javascript
在antd4.0中Form使用initialValue操作
Nov 02 #Javascript
vue+iview使用树形控件的具体使用
Nov 02 #Javascript
You might like
php 阴历-农历-转换类代码
2012/01/16 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
vue路由插件之vue-route
2019/06/13 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
安装dbus-python的简要教程
2015/05/05 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python获取array中指定元素的示例
2019/11/26 Python
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
班组长的岗位职责
2013/12/09 职场文书
打架检讨书800字
2014/01/10 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
请假条范文大全
2014/04/10 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014国庆节标语口号
2014/09/19 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
解除租房协议书
2014/12/03 职场文书
导游词范文
2015/02/13 职场文书
python实现简单的井字棋
2021/05/26 Python