基于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日历效果

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

(0)

相关推荐

  • VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • Vue.js创建Calendar日历效果

    使用 Vue.js 进行数据与视图的绑定,数据更新会让视图自动进行更新,类似 Android 里面的 DataBinding. 实现一个HTML的日历效果. html 部分 <div id="calendar"> <!-- 年份 月份 --> <div class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,

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

    基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换,具体内容如下 <template> <div class="date"> <!-- 年份 月份 --> <div class="month"> <p>{{ currentYear }}年{{ currentMonth }}月</p> </div> <!-- 星期 --> <ul class=&q

  • vue-week-picker实现支持按周切换的日历

    本文实例为大家分享了vue-week-picker实现按周切换的日历的具体代码,供大家参考,具体内容如下 vue-week-picker 安装 npm install vue-week-picker --save-dev DEMO 原生:线上DEMO 与element-ui结合使用:线上DEMO 功能 自适应式按周切换 与DatePicker日期选择器使用 结合Element-ui使用 效果 与vue-element结合组件,请转到链接 使用 <VueWeekPicker @dateValue=

  • 基于vue的tab-list类目切换商品列表组件的示例代码

    在大多数电商场景中,页面都会有类目切换加上商品列表的部分,页面大概会长这样 每次写类似场景的时候,都需要去为类目商品列表写很多逻辑,为了提高开发效率我决定将这一部分抽离成组件. 实现 1.样式 所有tab栏的样式和商品列表的样式都提供插槽,供业务自己定制 2.变量 isTabFixed: false,//是否吸顶 tab: 1,//当前tab page: 1,//当前页数 listStatus: { finished: false,//是否已是最后一页 loading: false,//是否加载

  • 详解基于Vue的支持数据双向绑定的select组件

    今天用Vue做一个小项目时需要用到多个select筛选功能,但是原生的太丑,如果直接写在当前页多个select处理起来又太繁琐,第三方ui又太大,所以就自己写了一个,并上传了GitHub仓库,仓库地址:https://github.com/tuohuang/vue-select 使用方法: 引入组件: import VueSelect from '../components/VueSelect' 注册组件 export default { components: { VueSelect } }

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    效果图如下所示: 在线地址: github.czero.cn/fancy 点击下载安卓apk安装包 源码地址: github.com/czero1995/f- 项目主架构 使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播

  • 基于vue-cli 路由 实现类似tab切换效果(vue 2.0)

    1,更改main.js 2,在App.vue中,写入两个跳转链接(router-link),分别跳转到"home""About" (home.About即分别是两个组件) ----其中,为什么要使用<router-link></router-link>, 请移步:http://router.vuejs.org/zh-cn/api/router-link.html ----router-view路由视图(必须) ----css可以使用外部样式

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • 基于vue实现分页/翻页组件paginator示例

    序言 项目需要自己写了一个基于vue的paginator分享出来,欢迎各路好汉来指教 当页数小于999(包括999)页 页数大于999页 首页或尾页disabled 10页之内显示 Usage 参数 pageCount: 整数,代表总页数 监听事件 @togglePage: 监听切换页面事件,可以获取到当前前往页的页数 父组件调用方法 index.vue <template lang="html"> <div> <paginator :pageCount=

随机推荐