基于vue的自定义日历组件

最新推荐文章于 2024-05-07 16:58:53 发布
最新推荐文章于 2024-05-07 16:58:53 发布
阅读量1w 收藏 30
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/namechenfl/article/details/88193791
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
     * {
            box-sizing: border-box;
        }
        ul {
            list-style-type: none;
        }
        body {
            font-family: Verdana, sans-serif;
            background: #E8F0F3;
        }
        #calendar{
            width:80%;
            margin: 0 auto;
            box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12);
        }
        .month {
            width: 100%;
            background: #00B8EC;
        }
        .month ul {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-between;
        }
        .year-month {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .year-month:hover {
            background: rgba(150, 2, 12, 0.1);
        }
        .choose-year {
            padding-left: 20px;
            padding-right: 20px;
        }
        .choose-month {
            text-align: center;
            font-size: 12px;
        }
        .arrow {
            padding: 30px;
        }
        .arrow:hover {
            background: rgba(100, 2, 12, 0.1);
        }
        .month ul li {
            color: white;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color: #00B8EC;
            display: flex;
            flex-wrap: wrap;
            color: #FFFFFF;
            justify-content: space-around;
        }
        .weekdays li {
            display: inline-block;
            width: 13.6%;
            text-align: center;
        }
        .days {
            padding: 0;
            background: #FFFFFF;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .days li {
            list-style-type: none;
            display: inline-block;
            width: 14.2%;
            text-align: center;
            padding-bottom: 10px;
            padding-top: 10px;
            font-size: 1rem;
            color: #000;
        }
        .days li .active {
            padding: 6px 10px;
            border-radius: 50%;
            background: #00B8EC;
            color: #fff;
        }
        .days li .other-month {
            padding: 5px;
            color: gainsboro;
        }
        .days li:hover {
            background: #e1e1e1;
        }
    </style>
</head>
<body>
        <div id="calendar">
                <!-- 年份 月份 -->
                <div class="month">
                    <ul>
                        <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
                        <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
                        <li class="year-month" @click="pickYear(currentYear,currentMonth)">
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </li>
                        <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
                    </ul>
                </div>
                <!-- 星期 -->
                <ul class="weekdays">
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li style="color:red">六</li>
                    <li style="color:red">日</li>
                </ul>
                <!-- 日期 -->
                <ul class="days">
                    <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                    <li  v-for="dayobject in days">
                        <!--本月-->
                        <!--如果不是本月  改变类名加灰色-->
            
                        <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>
            
                        <!--如果是本月  还需要判断是不是这一天-->
                        <span v-else>
                      <!--今天  同年同月同日-->
                            <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()" class="active">{{ dayobject.day.getDate() }}</span>
                            <span v-else>{{ dayobject.day.getDate() }}</span>
                        </span>
            
                    </li>
                </ul>
            </div>
</body>
<script>
    var myVue=new Vue({
        el: '#calendar',
        data: {
            currentDay: 1,
            currentMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
        },
        created: function() {  //在vue初始化时调用
            this.initData(null);
        },
        methods: {
            initData: function(cur) {
                var leftcount=0; //存放剩余数量
                var date;


                if (cur) {
                    date = new Date(cur);
                } else {
                    var now=new Date();
                    var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;

                this.currentWeek = date.getDay(); // 1...6,0
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                //初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                    dayobject.day=d;
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用


                }
                //其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject={};
                    dayobject.day=d;
                    this.days.push(dayobject);
                }

            },
            pickPre: function(year, month) {

                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickNext: function(year, month) {
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(35);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickYear: function(year, month) {
                alert(year + "," + month);
            },

            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function(year,month,day){
                var y = year;
                var m = month;
                if(m<10) m = "0" + m;
                var d = day;
                if(d<10) d = "0" + d;
                return y+"-"+m+"-"+d
            },


        },
    });

</script>
</html>

 

组件写法：

<template>
       <div id='calendar'>
                <!-- 年份 月份 -->
                <div class='month'>
                    <ul>
                        <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
                        <li class='arrow' @click='pickPre(currentYear,currentMonth)'>上个月</li>
                        <li class='year-month'>
                            <span class='choose-year'>{{ currentYear }}年</span>
                            <span class='choose-month'>{{ currentMonth }}月</span>
                        </li>
                        <li class='arrow' @click='pickNext(currentYear,currentMonth)'>下个月</li>
                    </ul>
                </div>
                <!-- 星期 -->
                <ul class='weekdays'>
                    <li>S</li>
                    <li>Mo</li>
                    <li>Tu</li>
                    <li>We</li>
                    <li>Th</li>
                    <li>Fr</li>
                    <li>S</li>
                </ul>
                <!-- 日期 -->
                <ul class='days'>
                    <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                    <li  v-for='(dayobject,i) in days' :key='i'>
                        <!--本月-->
                        <!--如果不是本月  改变类名加灰色-->
                        <span v-if='dayobject.day.getMonth()+1 != currentMonth' class='other-month' @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
                        <!--如果是本月  还需要判断是不是这一天-->
                        <span v-else>
                      <!--今天  同年同月同日-->
                            <span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()' class='active' @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
                            <span v-else @click="getDayTime(dayobject.day)">{{ dayobject.day.getDate() }}</span>
                        </span>
                    </li>
                </ul>
            </div>
</template>
<script>
export default {
  data () {
    return {
      currentDay: 1,
      currentMonth: 1,
      currentYear: 1970,
      currentWeek: 1,
      days: []
    }
  },
  created: function () {
    // 在vue初始化时调用
    this.initData(null)
  },
  methods: {
    initData: function (cur) {
      // var leftcount = 0 // 存放剩余数量
      var date
      if (cur) {
        date = new Date(cur)
      } else {
        var now = new Date()
        var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
        d.setDate(35)
        date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
      }
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1
      this.currentWeek = date.getDay() // 1...6,0
      if (this.currentWeek === 0) {
        this.currentWeek = 7
      }
      var str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      )
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个
      // 初始化本周
      for (var i = this.currentWeek; i >= 0; i--) {
        var d2 = new Date(str)
        d2.setDate(d2.getDate() - i)
        var dayobjectSelf = {} // 用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobjectSelf.day = d2
        this.days.push(dayobjectSelf) // 将日期放入data 中的days数组 供页面渲染使用
      }
      // 其他周
      for (var j = 1; j <= 35 - this.currentWeek; j++) {
        var d3 = new Date(str)
        d3.setDate(d3.getDate() + j)
        var dayobjectOther = {}
        dayobjectOther.day = d3
        this.days.push(dayobjectOther)
      }
    },
    getDayTime (el) {
      alert(el)
    },
    pickPre: function (year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1))
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    pickNext: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1))
      d.setDate(35)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function (year, month, day) {
      var y = year
      var m = month
      if (m < 10) m = '0' + m
      var d = day
      if (d < 10) d = '0' + d
      return y + '-' + m + '-' + d
    }
  }
}
</script>
<style>
#calendar {
  font-size: 12px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.1),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.month {
  width: 100%;
  color: #333333;
}
.month ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  height: 35px;
}
.year-month {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.choose-month {
  text-align: center;
  font-size: 12px;
}
.arrow {
  padding: 15px;
  color: #999999;
}

.month ul li {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.weekdays {
  margin: 0;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  color: #999;
  justify-content: space-around;
}
.weekdays li {
  display: inline-block;
  width: 13.6%;
  text-align: center;
}
.days {
  padding: 10px;
  background: #ffffff;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.days li {
  list-style-type: none;
  display: inline-block;
  width: 14.2%;
  text-align: center;
  padding-bottom: 4px;
  padding-top: 10px;
  font-size: 12px;
  color: #000;
}
.days li .active {
  padding: 6px 10px;
  border-radius: 50%;
  background: #00b8ec;
  color: #fff;
}
.days li .other-month {
  padding: 5px;
  color: gainsboro;
}
.days li:hover>span>span {
    padding: 6px 10px;
    border-radius: 50%;
    background: #e1e1e1;
    color: #fff;
}
</style>

 

岁月如歌_
关注
VUE：自定义实现日历表
干饭搬砖两不误。
05-27 7694
关于自定义一个日历表（类似windows的日历）
vue2 组件—js原生自定义日历组件实现方法
最新发布
qq_42101569的博客
07-23 648
封装一个日历组件，可以根据日期对应数据匹配对应阈值区间在当前日期下渲染不同颜色的短线。当天之后的日期显示为灰色，并设为无法点击的状态；若选择其他日期，小点位置一直保持在当天日期下，选择的日期显示为蓝色。在本案例中外部框架的高度是固定的，因此就要对含有不同周数的月份进行判断然后在样式设置，恰好占据4周的月份比较少，在本案例中并未对这种情况进行设置。currentMonth代表当前月份，currentYear代表当前年份，clickDate是组件内发生点击日期事件后向父组件传值，以便联动其他系统功能。
vue 自定义日历组件
weixin_33778778的博客
11-05 290
<template> <div class=""> <div class="calendarTraffic" name="CalendarTraffic"> <!-- 年份/月份 流量查询--> <div class="monthHeader"> <!--绑定click事件，点击按钮；重新刷新当前日期--&g...
vue 自定义日历
凡尘
04-14 417
vue 自定义日历
前端之vue 封装自定义日历
baidu_33164415的博客
12-17 1588
前端之vue 封装自定义日历
vue 日历
加加加菲猫
09-26 1807
    html   &lt;div&gt; &lt;input type="text" @click="openByDialog" :value="calendar.display" ref='time' readonly="readonly"&gt; &lt;div class="calendar-dialog" v-if="calend
vuefullcalendar一个基于VUE的日历组件
08-11
Vue FullCalendar是一个基于Vue.js框架的日历组件，它专为JavaScript开发设计，尤其适用于需要进行事件调度和管理的Web应用程序。Vue.js是一个轻量级、高性能的前端框架，以其组件化开发模式和易于上手的特性深受...
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
10-16
主要为大家详细介绍了Vue编写可显示周和月模式的日历，Vue自定义日历内容的显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue自定义日历组件（12日历平铺） pc/移动
YYYY77777的博客
08-24 2147
效果图：{currentYear } } vue自定义12日历组件(简单易上手) 日历封装 pc/移动端 < / div > < div class = "choose-search" > < el - input{{
Vue3+Typescript日历组件
07-29
首先，我们从标题"Vue3+Typescript日历组件"出发，理解其核心是创建一个基于Vue3的组件，且使用了TypeScript作为编程语言。TypeScript是JavaScript的超集，它提供了静态类型系统，有助于在编码阶段发现潜在的错误，...
基于vue的日历控件
11-05
日历组件，相关的代码，可以自定义，可以添加事件，vue+javascript
vue日历插件
05-05
自己实现的vue范围选择日历件。使用方法请至我的博客开发那点事（四）查看
vue-el-calendar.zip Vue -ElementUI 日历控件
06-21
vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
vue-calendar.rar-Vue -ElementUI 日历控件-考勤日历表
01-13
适合做考勤 日历表 可以让某些日期呈现各种不同的颜色 vue-el-calendar.zip Vue -ElementUI 日历控件 以vue为承载容器，使用elementUI为组件，css3搭配色彩，样式较为美观，满足基本需求，无第三方依赖环境，体积几百K 在vue+elementUI的项目中，丢入即可运行出来
vue实现自定义日历
qq_29677283的博客
05-10 4561
vue日历面板、vue日历、自定义日历。
vue自定义日历(含农历)
weixin_38222306的博客
05-07 825
3.公历转农历工具类。
【vue】 实现 自定义 Calendar 日历
weixin_50450473的博客
11-14 1635
{{ date.split('年')[0]+'-'+date.split('年')[1].replace('月','')}}
自定义 日历组件 vue
weixin_30675967的博客
09-18 154
github地址：https://github.com/longPanda/custom-date-picker/blob/master/index.vue <template> <div> <Row type="flex" justify="space-between" class="operation-bar">...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值