基于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 相关文章推荐
js 浏览器事件介绍
Mar 30 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
js获取php变量的实现代码
Aug 10 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
smarty简单应用实例
2015/11/03 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
2015/07/05 Javascript
用原生js做单页应用
2017/01/17 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python SQLite3简介
2018/02/22 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
appium+python adb常用命令分享
2020/03/06 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
小学生学习感言
2014/03/10 职场文书
促销活动总结范文
2014/04/30 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript