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

 更新时间:2018-11-06 15:00:50   作者:佚名   我要评论(0)

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



components.js代码如下:


Vue.component('sc-calendar',{
template:'<div class="scCalendar">' +
'<div class="calenda

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


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实现自定义日期组件功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • Vue无限滑动周选择日期的组件的示例代码
  • 详解vue移动端日期选择组件
  • 基于vue2.0+vuex的日期选择组件功能实现
  • vue日期组件 支持vue1.0和2.0

相关文章

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

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

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calenda
    2018-11-06
  • 易语言彻底删除指定的文件

    易语言彻底删除指定的文件

    删除文件命令 英文命令:kill 操作系统支持:Windows、Linux 所属类别:磁盘操作 成功返回真,失败返回假。 语法: 逻辑型 删除文件 (欲删除的文件名
    2018-11-06
  • 易语言在指定路径下新建一个文件夹目录

    易语言在指定路径下新建一个文件夹目录

    创建目录命令 英文命令:MkDir 操作系统支持:Windows、Linux 所属类别:磁盘操作 创建一个新的目录。成功返回真,失败返回假。 语法: 逻辑型 创建目录
    2018-11-06
  • 易语言播放指定的音乐文件

    易语言播放指定的音乐文件

    播放音乐命令 英文命令:PlayMusic 操作系统支持:Windows 所属类别:媒体播放 可以播放 .WAV、.MID 声音文件或相应格式的字节集声音数据、声音资源。成
    2018-11-06
  • electron中使用bootstrap的示例代码

    electron中使用bootstrap的示例代码

    安装 安装bootstrap命令如下: npm install bootstrap --save 安装后可能报告如下错误: npm WARN bootstrap@4.1.3 requires a peer of popper.
    2018-11-06
  • 微信小程序实现选项卡效果

    微信小程序实现选项卡效果

    本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom:
    2018-11-06
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    什么是树形菜单还是要简单的啰嗦一下,比如: 上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵
    2018-11-06
  • Vue常用的几个指令附完整案例

    Vue常用的几个指令附完整案例

    越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代
    2018-11-06
  • 微信小程序自定义tabBar组件开发详解

    微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabb
    2018-11-06
  • 易语言截取当前窗口图片功能

    易语言截取当前窗口图片功能

    快照命令 英文命令:GetWinPic 操作系统支持:Windows 所属类别:系统处理 为高级用户提供,初级用户无需掌握; 捕获指定窗口或屏幕上所有现有显示内容,返回
    2018-11-06

最新评论