vue实现自定义日期组件功能的实例代码


Posted in Javascript onNovember 06, 2018

实现一个日期组件,如图:

vue实现自定义日期组件功能的实例代码

components.js代码如下:

Vue.component('sc-calendar',{
  template:'<div class="scCalendar">' +
  '<div class="calendar_header">' +
    '<div class="prev" @click="prevMonth"> < </div>' +
    '<span class="text_year">{{currentYear}}年</span>' +
    '<span class="text_month">{{currentMonth}}月</span>' +
    '<div class="next" @click="nextMonth"> > </div>' +
  '</div>' +
  '<div class="calendar_content">' +
    '<ul class="week">' +
      '<li v-for="item in weeks">{{item}}</li>' +
    '</ul>' +
    '<ul class="day">' +
      '<li v-for="item in dayList" :class="{marginRight0:item.marginRight0}">{{item.text}}</li>' +
    '</ul>' +
  '</div>' +
  '</div>',
  data:function(){
    return {
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      dayList:[],
      currentYear:'',
      currentMonth: ''
    }
  },
  created:function(){
    var date=new Date;
    this.currentYear = date.getFullYear();
    this.currentMonth = date.getMonth()+1;
    this.calDay(this.currentYear, this.currentMonth);
  },
  methods:{
    //计算指定月份的天数
    calDay:function(year,month){
      var oDate = new Date();
      //setFullYear(year,month,day) 方法用于设置年份,返回调整过的日期的毫秒表示。
      oDate.setFullYear(year, month-1,1);
      oDate.setDate(1);//设置一个月中的第一天
      var oNow = oDate.getDay();//当前月的第一天是星期几
      var dayNum = 0; //指定月份的天数
      if(month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12){
        dayNum = 31;
      }else if(month==4 || month==6 || month==9 || month==11){
        dayNum = 30;
      }else if(month==2&&this.isLeaYear(year)){
        dayNum = 29;
      }else{
        dayNum = 28;
      }
      var SumDayLiNum = 0;//总共的格子数
      var lastNum = (dayNum-(7-oNow))%7; //最后剩余的数
      lastNum = lastNum == 0?0:7;
      SumDayLiNum = 7 + parseInt((dayNum-(7-oNow))/7)*7+lastNum;
      this.showDayList(dayNum,SumDayLiNum,oNow);
    },
    //判断是否是闰年
    isLeaYear:function(year){
      if(year%4==0&&year%100!=0){
        return true;
      }else{
        if(year%400==0){
          return true;
        }else{
          return false;
        }
      }
    },
    //显示当前日历内容
    showDayList:function(dayNum,SumDayLiNum,oNow){
      this.dayList = [];
      var rows = parseInt(SumDayLiNum/7);
      var cols = 7;
      for(var i=0;i<rows;i++){
        for(var j=0;j<cols ;j++){
          if(j == cols-1){
            this.dayList.push({
              text:'',
              marginRight0:true
            })
          }else{
            this.dayList.push({
              text:'',
              marginRight0:false
            })
          }
        }
      }
      for(var z=1;z<=dayNum;z++){
        this.dayList[oNow].text = z;
        oNow++;
      }
    },
    prevMonth:function(){
      if( this.currentMonth == 1){
        this.currentYear = this.currentYear - 1;
        this.currentMonth = 12;
      }else{
        this.currentMonth = this.currentMonth - 1;
      }
      this.calDay(this.currentYear, this.currentMonth);
    },
    nextMonth:function(){
      if( this.currentMonth == 12){
        this.currentYear = this.currentYear + 1;
        this.currentMonth = 1;
      }else{
        this.currentMonth = this.currentMonth + 1;
      }
      this.calDay(this.currentYear, this.currentMonth);
    }
  }
});

ccal.css代码:

html {
 font-family: '微软雅黑';
}
body,
div,
span,
img,
ul,
li,
p {
 margin: 0;
 padding: 0;
}
ul,
li {
 list-style: none;
}
.commonprev {
 width: 0.46666667rem;
 height: 0.93333333rem;
 color: #ffffff;
 position: absolute;
 display: inline-block;
}
.commonyear {
 width: 5.46666667rem;
 height: 1.6rem;
 font-size: 1rem;
 color: #ffffff;
 position: absolute;
}
.scCalendar {
 width: 25rem;
 height: 21.66666667rem;
 background: #005498;
 background-size: 100%;
}
.scCalendar .calendar_header {
 height: 2.93333333rem;
 width: 100%;
 position: relative;
 line-height: 2.93333333rem;
}
.scCalendar .calendar_header .prev {
 width: 0.46666667rem;
 height: 0.93333333rem;
 color: #ffffff;
 position: absolute;
 display: inline-block;
 left: 2.76666667rem;
}
.scCalendar .calendar_header .next {
 width: 0.46666667rem;
 height: 0.93333333rem;
 color: #ffffff;
 position: absolute;
 display: inline-block;
 right: 2.76666667rem;
}
.scCalendar .calendar_header .text_year {
 width: 5.46666667rem;
 height: 1.6rem;
 font-size: 1rem;
 color: #ffffff;
 position: absolute;
 left: 9.76666667rem;
}
.scCalendar .calendar_header .text_month {
 width: 5.46666667rem;
 height: 1.6rem;
 font-size: 1rem;
 color: #ffffff;
 position: absolute;
 left: 13.1rem;
}
.scCalendar .calendar_content {
 padding: 0 1rem;
}
.scCalendar .calendar_content li {
 width: 2rem;
 height: 2rem;
 line-height: 2rem;
 margin-right: 1.5rem;
 text-align: center;
 margin-bottom: 0.66666667rem;
 float: left;
 color: white;
 font-size: 0.93333333rem;
}
.scCalendar .calendar_content .week li:nth-of-type(7) {
 margin-right: 0;
}
.scCalendar .calendar_content .day .marginRight0 {
 margin-right: 0;
}

index.html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./ccal.css" rel="external nofollow" >
  <script>
    var pixRatio = 1/window.devicePixelRatio; //像素比
    var html = document.documentElement;
    document.write('<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale='+ pixRatio +',minimum-scale='+ pixRatio +',maximum-scale='+ pixRatio +'">');
    html.style.fontSize = html.clientWidth/25 + 'px';
  </script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="./components.js"></script>
</head>
<body>
<div id="app">
  <div class="calendar">
    <sc-calendar></sc-calendar>
  </div>
</div>
</body>
<script>
  var vm = new Vue({
    el:'#app'
  })
</script>
</html>

总结

以上所述是小编给大家介绍的vue实现自定义日期组件功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
js 返回时间戳所对应的具体时间
Jul 20 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 #Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
You might like
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
js不是基础的基础
2006/12/24 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
jQuery 加上最后自己的验证
2009/11/04 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javascript forEach通用循环遍历方法
2010/10/11 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
JavaScript 正则命名分组【推荐】
2018/06/07 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
Android笔试题总结
2014/11/29 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
大学生简短的自我评价
2014/09/12 职场文书
体育教师个人工作总结
2015/02/09 职场文书
升学宴学生致辞
2015/07/27 职场文书
2019各种承诺书范文
2019/06/24 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
php7中停止php-fpm服务的方法详解
2021/05/09 PHP