基于Vue实现支持按周切换的日历


Posted in Javascript onSeptember 24, 2020

基于Vue的日历小功能,可根据实际开发情况按每年、每月、每周、进行切换,具体内容如下

基于Vue实现支持按周切换的日历

<template>
 <div class="date">
  <!-- 年份 月份 -->
  <div class="month">
  <p>{{ currentYear }}年{{ currentMonth }}月</p>
  </div>
  <!-- 星期 -->
  <ul class="weekdays">
  <li>一</li>
  <li>二</li>
  <li>三</li>
  <li>四</li>
  <li>五</li>
  <li>六</li>
  <li>日</li>
  </ul>
  <!-- 日期 -->
  <ul class="days">
  <li @click="pick(day)" v-for="(day, index) in days" :key="index">
   <!--本月-->
   <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>
</template>

js部分:目前默认显示一周,可根据实际情况更改

<script>


 export default {
 name: 'date',

 data () {
  return {
  currentYear: 1970, // 年份
  currentMonth: 1, // 月份
  currentDay: 1, // 日期
  currentWeek: 1, // 星期
  days: [],
  }
 },

 mounted () {

 },

 created () {
  this.initData(null)
 },

 methods: {
  formatDate (year, month, day) {
  const y = year
  let m = month
  if (m < 10) m = `0${m}`
  let d = day
  if (d < 10) d = `0${d}`
  return `${y}-${m}-${d}`
  },

  initData (cur) {
  let 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
  }
  const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
  this.days.length = 0
  // 今天是周日,放在第一行第7个位置,前面6个 这里默认显示一周,如果需要显示一个月,则第二个循环为 i<= 35- this.currentWeek
  /* eslint-disabled */
  for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
   const d = new Date(str)
   d.setDate(d.getDate() - i)
   // console.log(y:" + d.getDate())
   this.days.push(d)
  }
  for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
   const d = new Date(str)
   d.setDate(d.getDate() + i)
   this.days.push(d)
  }
  },

  // 上个星期
  weekPre () {
  const d = this.days[0] // 如果当期日期是7号或者小于7号
  d.setDate(d.getDate() - 7)
  this.initData(d)
  },

  // 下个星期
  weekNext () {
  const d = this.days[6] // 如果当期日期是7号或者小于7号
  d.setDate(d.getDate() + 7)
  this.initData(d)
  },

  // 上一??月 传入当前年份和月份
  pickPre (year, month) {
  const d = new Date(this.formatDate(year, month, 1))
  d.setDate(0)
  this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
  },


  // 下一??月 传入当前年份和月份
  pickNext (year, month) {
  const d = new Date(this.formatDate(year, month, 1))
  d.setDate(35)
  this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
  },

  // 当前选择日期
  pick (date) {
  alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
  },
 },
 }
</script>
<style lang="scss">
 @import "~base";

 .date {
 height: px2rem(180);
 color: #333;

 .month {
  font-size: px2rem(24);
  text-align: center;
  margin-top: px2rem(20);
 }

 .weekdays {
  display: flex;
  font-size: px2rem(28);
  margin-top: px2rem(20);

  li {
  flex: 1;
  text-align: center;
  }
 }

 .days {
  display: flex;

  li {
  flex: 1;
  font-size: px2rem(30);
  text-align: center;
  margin-top: px2rem(10);
  line-height: px2rem(60);

  .active {
   display: inline-block;
   width: px2rem(60);
   height: px2rem(60);
   color: #fff;
   border-radius: 50%;
   background-color: #fa6854;
  }

  .other-month {
   color: #e4393c;
  }
  }
 }
 }
</style>

相关参考链接:Vue.js创建Calendar日历效果

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

Javascript 相关文章推荐
javascript getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
改善用户体验的五款jQuery插件分享
May 22 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
React-Native 组件之 Modal的使用详解
Aug 08 #Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
You might like
德生9700DX电路分析
2021/03/02 无线电
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
浅谈php的优缺点
2015/07/14 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
node.js中的fs.chown方法使用说明
2014/12/16 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
Bootstrap图片轮播组件使用实例解析
2016/06/30 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
2017/12/24 Javascript
JS设计模式之命令模式概念与用法分析
2018/02/06 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
详解Python多线程
2016/11/14 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Python实现播放和录制声音的功能
2020/08/12 Python
海外淘书首选:AbeBooks
2017/07/31 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
一套Delphi的笔试题一
2016/02/14 面试题
项目建议书范文
2014/05/12 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
python基础之while循环语句的使用
2021/04/20 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python