vue+elementUI实现简单日历功能


Posted in Javascript onSeptember 24, 2020

vue+elementUI简单的实现日历功能,供大家参考,具体内容如下

<div class="calender2">
  <div class="date-headers">
  <div class="date-header">
    <div><el-button type="primary" @click="handlePrev"><i class="el-icon-arrow-left"></i>上一月</el-button></div>
    <div>{{ year }}年{{ month }}月{{ day }}日</div>
    <div><el-button type="primary" @click="handleNext">下一月<i class="el-icon-arrow-right"></i></el-button></div>
    <div><el-button type="primary" icon="el-icon-refresh-left" @click="refresh"></el-button></div>
  </div>
  </div>
  <div class="date-content">
    <div class="week-header">
      <div
       v-for="item in ['日','一','二','三','四','五','六']"
       :key=item
      >{{ item }}
      </div>
    </div>
    <div class="week-day">
      <div
       class="every-day"
       v-for="item in 42"
       :key="item"
       @click="handleClickDay(item - beginDay)"
      >
        <div v-if="item - beginDay > 0 && item - beginDay <= curDays"   :class="`${year}-${month}-${item - beginDay}` === `${year}-${month}-${day}` ? 'nowDay':''"
        >{{ item - beginDay }}</div>
        <div class="other-day" v-else-if="item - beginDay <= 0">{{ item - beginDay + prevDays }}</div>
        <div class="other-day" v-else>{{ item - beginDay -curDays }}</div>
      </div>
    </div>
  </div>
</div>

## javascript

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        year: null,
        month: null,
        day: null,
        currentDay: null,
        currentYearMonthTimes: null,//当前年的月的天数
        monthOneDay: null,//一个月中的某一天
        curDate: null,
        prevDays: null,//上一月天数
      }
    },
    computed: {
      curDays() {
        return new Date(this.year, this.month, 0).getDate();
      },
      // 设置该月日期起始值(找到一号是在哪里)
      beginDay() {
        return new Date(this.year, this.month - 1, 1).getDay();
      }
    },
    created() {
      this.getInitDate();
      this.currentYearMonthTimes = this.mGetDate(this.year, this.month); //本月天数
      this.prevDays = this.mGetDate(this.year, this.month - 1);
      this.curDate = `${this.year}-${this.month}-${this.day}`
      console.log(this.curDate)
    },
    methods: {
      refresh(){ //强制刷新页面
        location. reload()
      },
      handleClickDay(day){ //点击这一天,绑定点击事件
        console.log( '形参传进来的',day)
        console.log( 'data里面的this.day',this.day)
        console.log( 'data里面的currentYearMonthTimes',this.currentYearMonthTimes)
        this.day = day
        if(this.day > this.currentYearMonthTimes){
          this.$message.warning('不能选择超出本月的日期');
        }
        console.log(day)
      },
      computedDay() {
        const allDay = new Date(this.year, this.month, 0).getDate();
        if (this.day > allDay) {
          this.day = allDay;
        }
      },
      //设置页头显示的年月日
      getInitDate() {
        const date = new Date();
        this.year = date.getFullYear();
        this.month = date.getUTCMonth() + 1;
        this.day = date.getDate();
      },
      // 如果要获取当前月份天数:
      mGetDate() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var d = new Date(year, month, 0);
        return d.getDate();
      },
      handlePrev() {
        if (this.month == 1) {
          this.month = 12
          this.year--
        } else {
          this.month--
        }
        this.computedDay()
      },
      handleNext() {
        if (this.month == 12) {
          this.month = 1
          this.year++
        } else {
          this.month++
        }
        this.computedDay()
      }
    }
  }
</script>
<style scoped>
  * {
    margin: 0px;
    border: 0px;
    list-style: none;
  }

  .calender2 {
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 396px;
    width: 420px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  .date-header {
    height: 60px;
    width: 422px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .date-headers {
    height: 60px;
    width: 422px;
    display: flex;
  }

  .pre-month {
    position: absolute;
    display: inline-block;
    height: 0px;
    width: 0px;
    border: 15px solid;
    border-color: transparent rgb(35, 137, 206) transparent transparent;
  }

  .next-month {
    position: absolute;
    display: inline-block;
    height: 0px;
    width: 0px;
    border: 15px solid;
    border-color: transparent transparent transparent rgb(35, 137, 206);
  }

  .show-date {
    margin-left: 40px;
    margin-top: 0px;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    width: 310px;
    color: rgb(35, 137, 206);
  }

  .week-header {
    color: #000000;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
  }

  .week-header div {
    margin: 0;
    padding: 0;
    display: inline-block;
    height: 20px;
    width: 60px;
  }

  .every-day {
    display: inline-block;
    height: 50px;
    width: 60px;
    text-align: center;
    line-height: 50px;
  }

  .other-day {
    color: #ccc;
  }

  .nowDay {
    background: rgb(121, 35, 206);
    border: 1px solid #87c66d;
  }

  .active-day {
    /* padding: 2px */
    /* border-sizing:content-box; */
    border: 2px solid rgb(35, 137, 206);
  }
</style>

完成后的效果

vue+elementUI实现简单日历功能

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

Javascript 相关文章推荐
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
js文字横向滚动特效
Nov 11 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
学习vue.js计算属性
Dec 03 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
Django模板继承 extend标签实例代码详解
May 16 Javascript
小程序实现文字循环滚动动画
Jun 14 Javascript
JavaScript获取时区实现过程解析
Sep 24 #Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 #Javascript
原生js实现购物车功能
Sep 23 #Javascript
详解微信小程序动画Animation执行过程
Sep 23 #Javascript
原生js实现分页效果
Sep 23 #Javascript
原生js实现购物车
Sep 23 #Javascript
javascript实现简易计算器功能
Sep 23 #Javascript
You might like
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
php限制ip地址范围的方法
2015/03/31 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
javascript ready和load事件的区别示例介绍
2013/08/30 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
原生JS实现列表内容自动向上滚动效果
2019/05/22 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[17:36]VG战队纪录片
2014/08/21 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
python绘制简单彩虹图
2018/11/19 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
违反学校规定检讨书
2014/01/18 职场文书
cf搞笑广告词
2014/03/14 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
师范生见习报告
2014/10/31 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
MySQL如何解决幻读问题
2021/08/07 MySQL