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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
js Dialog 实践分享
Oct 22 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
防止登录页面出现在frame中js代码
Jul 22 Javascript
AngularJS 路由详解和简单实例
Jul 28 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 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操作JSON格式数据的实现代码
2011/12/24 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
window.location.hash 属性使用说明
2010/03/20 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JavaScript实现上下浮动的窗口效果代码
2015/10/12 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Python中的两个内置模块介绍
2015/04/05 Python
python实现的文件同步服务器实例
2015/06/02 Python
vscode 远程调试python的方法
2017/12/01 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
《开国大典》教学反思
2014/04/19 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
护理见习报告范文
2014/11/03 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
2015年质量管理工作总结范文
2015/05/18 职场文书
python 如何用terminal输入参数
2021/05/25 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫