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 相关文章推荐
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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实现修改新闻时删除图片的方法
2015/05/12 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
json字符串之间的相互转换示例代码
2014/08/21 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
linux面试题参考答案(4)
2014/09/21 面试题
营销与策划应届生求职信
2013/11/04 职场文书
网络书店创业计划书
2014/02/07 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
篮球拉拉队口号
2015/12/25 职场文书