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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
jQuery入门介绍之基础知识
Jan 13 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
easyUI使用分页过滤器对数据进行分页操作实例分析
Jun 01 Javascript
javascript实现扫雷简易版
Aug 18 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP防注入安全代码
2008/04/09 PHP
PHP防止跨域提交表单
2013/11/01 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
分享一则PHP定义函数代码
2015/02/26 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python 文件查找及内容匹配方法
2018/10/25 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Python页面加载的等待方式总结
2021/02/28 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
优秀的计算机专业求职信范文
2013/12/27 职场文书
优秀民警事迹材料
2014/01/29 职场文书
微信营销策划方案
2014/02/24 职场文书
应聘编辑自荐信范文
2014/03/12 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
孙振耀退休感言
2015/08/01 职场文书
我爱我班主题班会
2015/08/13 职场文书
详解Python函数print用法
2021/06/18 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python