基于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代码
May 27 Javascript
一些常用且实用的原生JavaScript函数
Sep 08 Javascript
javascript中的对象创建 实例附注释
Feb 08 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
实例解析Array和String方法
Dec 14 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
JS数据类型分类及常用判断方法
Nov 19 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
php用户注册信息验证正则表达式
2015/11/12 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PDO::prepare讲解
2019/01/29 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
js三种排序算法分享
2012/08/16 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
详解nodejs模板引擎制作
2017/06/14 NodeJs
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vue实现弹幕功能
2019/10/25 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python理解递归的方法总结
2019/01/28 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python的历史与优缺点整理
2020/05/26 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
党支部四风整改方案
2014/10/25 职场文书
学雷锋活动简报
2015/07/20 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL