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 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
jquery中实现简单的tabs插件功能的代码
Mar 02 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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
咖啡与牛奶
2021/03/03 冲泡冲煮
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
jquery tools之tooltip
2009/07/25 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js导出txt示例代码
2014/01/14 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python双向链表实现实例代码
2013/11/21 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python3 翻转二叉树的实现
2019/09/30 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
keras slice layer 层实现方式
2020/06/11 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
医药销售自我评价200字
2014/09/11 职场文书
中小学生学籍证明
2014/10/25 职场文书
学校中秋节活动总结
2015/03/23 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
2015年推普周活动方案
2015/05/06 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
六年级数学教学反思
2016/02/16 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android