基于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 相关文章推荐
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
js实现圆形菜单选择器
Dec 03 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
vue接口请求加密实例
2020/08/11 Javascript
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python3最长回文子串算法示例
2019/03/04 Python
Python自动抢红包教程详解
2019/06/11 Python
Python中遍历列表的方法总结
2019/06/27 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
python循环输出三角形图案的例子
2019/11/22 Python
Python try except finally资源回收的实现
2021/01/25 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
会议开场欢迎词
2014/01/15 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
党支部四风整改方案
2014/10/25 职场文书
参加招聘会后的感想
2015/08/10 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL