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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
Javascript实现简易天数计算器
May 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
php二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
php7 新增功能实例总结
2020/05/25 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
python实现的简单文本类游戏实例
2015/04/28 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python实现猜数字游戏
2020/03/25 Python
Python jieba库用法及实例解析
2019/11/04 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
2014年售后服务工作总结
2014/11/18 职场文书
新郎答谢词
2015/01/04 职场文书
工作失职检讨书
2015/01/26 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
小兵张嘎观后感
2015/06/03 职场文书