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 相关文章推荐
解析Javascript小括号“()”的多义性
Dec 03 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
JS实现分页导航效果
Feb 19 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 sybase_fetch_array使用方法
2014/04/15 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php实现每日签到功能
2018/11/29 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
Python创建系统目录的方法
2015/03/11 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python实现图书管理系统
2018/03/12 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
如何使用python进行pdf文件分割
2019/11/11 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python中wx模块的具体使用方法
2020/05/15 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
实验室的标语
2014/06/20 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
win10下go mod配置方式
2021/04/25 Golang
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript