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 程序库的比较(一)之DOM功能
Apr 07 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 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判断正常访问和外部访问的示例
2014/02/10 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php批量删除操作(数据访问)
2017/05/23 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
thinkphp中的多表关联查询的实例详解
2017/10/12 PHP
Mootools 1.2教程 类(一)
2009/09/15 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
js动态生成表格(节点操作)
2021/01/12 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
用map函数来完成Python并行任务的简单示例
2015/04/02 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
django 信号调度机制详解
2019/07/19 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
历史系毕业生自荐信
2013/10/28 职场文书
策划总监岗位职责
2014/02/16 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
新学期主题班会
2015/08/17 职场文书
人民调解协议书
2016/03/21 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP