vue版日历组件的实现方法

开发背景

常用日历组件可能满足不了我们自定义的多种需求(比如样式),因此通常情况下我们可能需要自己手动开发款日历,先上图

开发流程

1. 根据常用日历样式,我们template部分可以分为三部分(上下月及当前月份展示;周日至周六展示;主体日期展示三部分)

1) template部分代码

<div class="date">
    <div class="header">
        <span class="pre_month" @click="onPreMonth"></span>
        <span v-cloak>{{ date.year }}年{{ date.month }}月</span>
        <span class="next_month" @click="onNextMonth"></span>
    </div>
    <div class="days">
        <table v-cloak border="0" cellspacing="0" cellpadding="0">
            <tr class="label">
                <td>周日</td>
                <td>周一</td>
                <td>周二</td>
                <td>周三</td>
                <td>周四</td>
                <td>周五</td>
                <td>周六</td>
            </tr>
            <tr class="row" v-for="week in weeks" :key="week[0].date">
                <td
                    class="column"
                    v-for="day in week"
                    :key="day.date"
                    v-bind:day="day.date"
                    @click="onSelectDay(day)"
                >
            <span
                v-bind:class="[{
                   checked: selectedDate == day.date,
                   weekend: day.isWeekend,
                 }]"
                    v-if="day.month == date.month">{{ day.v }}</span>
                </td>
            </tr>
        </table>
    </div>
</div>

2)js部分代码

// 生成日历函数
initDate(month) {
    var weeks = [] // template中用来渲染日历的数组
    var firstDay = this.moment(month, 'YYYY-MM') // 当月1号
    var week = firstDay.format('d') // 当月1号是周几 (比如周五则week = 5)
    var start = firstDay.subtract(week, 'days') // 日历上展示的第一个数(上个月的二十几号之类的,用于补齐日历)
    for (var i = 0; i < 6; i++) { // 通常日历为6行7排 42天,因此两个for循环
        var days = []
        for (var j = 0; j < 7; j++) {
            var day = {}
            day.num = start.toObject().date // 当前号数 22
            day.date = start.format('YYYY-MM-DD') // 返回值为2021-10-22
            day.month = start.format('MM') // 当前号数对应的月份,比如日历上个月27号则day.month = 9;这个月1号day.month = 10
            day.isWeekend = (start.format('E') === '6' || start.format('E') === '7') ? true : false // 是否是周末,用于UI区分周末和平时的颜色
            start.add(1, 'days')  // 没循环一次日期加一天
            days.push(day)
        }
        weeks.push(days)
    }
    this.date.year = this.moment(month).year()
    this.date.month = this.moment(month, 'YYYY-MM').add(0, 'month').format('MM')
    this.date.preMonth = this.moment(month, 'YYYY-MM').add(-1, 'month').format('YYYY-MM')
    this.date.nextMonth = this.moment(month, 'YYYY-MM').add(1, 'month').format('YYYY-MM')
    return weeks
}

初始化完成后调用(用于template中渲染)

mounted() {
    const currDate = new Date()
    this.weeks = this.initDate(this.moment(currDate).format('YYYY-MM'))
}

上个月、下个月处理

// 上一个月
onPreMonth() {
    const month = this.date.preMonth
    this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
},

// 下一个月
onNextMonth() {
    const month = this.date.nextMonth
    this.weeks = this.getCalendar(this.moment(month).format('YYYY-MM'))
}

选中某一天

onSelectDay(day) {
    if (!this.isSelectDay) return false
    if (day.month === this.date.month) {
        this.selectedDate = day.date
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vue中使用element日历组件的示例代码

    先看下效果图: 完整代码附上 <template> <div class="newSeeds" id="famerCalendar"> <div class="title-bottom"> <el-date-picker :clearable="false" prefix-icon="timeFilter" v-model="value2" ty

  • vue实现日历组件

    基于VUE实现日历组件,供大家参考,具体内容如下 年和月份是使用输入框来切换的,没有做成选择框,️和️切换月份,红色选取是选取的日期实现思路和网上的大多数一样,首先是把月份的天数存进一个数组, monthDay:[31,'',31,30,31,30,31,31,30,31,30,31], 由于二月的天数是不确定的,所以就先设置为空 然后去求选择的月份的第一天是星期几,通过 Date.getDay()函数,这个函数有一个注意事项,就是如果是星期天,他会返回0,这需要我们自己去处理一下 图中,201

  • vue实现垂直无限滑动日历组件

    用vue做了一个垂直无限滑动日历,在这里记录一下实现. 效果 组件 verticalCalendar.vue <template>   <div ref="container" class="calendar-vt">     <div class="top-month">{{ currentMonth }}月</div>     <ul ref="scroll" clas

  • VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • vue日历组件的封装方法

    本文实例为大家分享了vue日历组件的封装代码,供大家参考,具体内容如下 图示 封装的组件的代码如下 <template>   <div class="calendar">     <!-- 选择日历的弹出层 -->     <div class="model_mask" v-show="showtimemask" @click="showmask1()">     </di

  • 基于Vue2-Calendar改进的日历组件(含中文使用说明)

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • 从零写vue日历组件

    目录 1.前言 2.vue日历制作 2.1制作月份选择器 2.2制作日历 2.2.1获取当前月所要显示的日期 2.2.2给不同的日期添加不同的样式 2.3将月份选择器和日历组件组合使用 2.4编辑功能 1. 前言 最近做项目遇到一个需求,需要制作一个定制化的日历组件(项目使用的UI框架不能满足需求,算了,我直说了吧,ant design vue的日历组件是真的丑,所以就自己写了一个),如下图所示,需求大致如下:(2)日历可以按照月份进行上下月的切换.(2)按照月份展示周一到周日的排班信息.(3)

  • vue自定义可选时间的日历组件

    本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下 日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延 效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • vue版日历组件的实现方法

    开发背景 常用日历组件可能满足不了我们自定义的多种需求(比如样式),因此通常情况下我们可能需要自己手动开发款日历,先上图 开发流程 1. 根据常用日历样式,我们template部分可以分为三部分(上下月及当前月份展示:周日至周六展示:主体日期展示三部分) 1) template部分代码 <div class="date">     <div class="header">         <span class="pre_mo

  • 实现一个Vue版Upload组件

    目录 前言 今天分享我的第N个Vue组件,Upload 1.组件设计 组件实现 1.mixins 2. 上传组件的实现 3. 完整的代码 效果图 图片压缩前后大小对比 前言 之前对一些主流手机拍出的照片大小做过对比,华为P30拍出的照片3M左右,同事的小米9不知开启了什么模式拍出了10M以上的照片.照片太大了对服务端上传文件造成了不小的压力,对此,后端对前端提出了图片上传前对图片进行压缩.我们目前所用的UI库Upload组件并不支持对上传的图片进行压缩,所以花了一点时间自己写了上传的组件. 今天

  • Vue/React子组件实例暴露方法(TypeScript)

    目录 Vue2 Vue3 React 最近几个月都在用TS开发各种项目,框架有涉及到Vue3,React18等:记录一下Vue/React组件暴露出变量/函数的方法的写法: Vue2 回顾一下Vue2 组件暴露出去方法,它并没有约束,写在methods里的方法都能被调用,data里的变量也能被接收: 现拉一个vue 2.6.10的模板下来子组件的数据 父组件获取子组件实例,调用子组件方法等: 控制台输出: 这个输出的子组件实例里包含所有的变量和方法: Vue3 组件通过vue3提供的define

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • vue弹窗消息组件的使用方法

    本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下 本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果.所以暂时算是半成品. 练习代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ys-alert-component</title> <style

  • Vue数字输入框组件的使用方法

    最近在通过<Vue.js实战>系统学习Vue,虽然在项目中已多次使用Vue进行开发,但是对于一些非常基础性的知识点还不是很了解,因此这次通过结合数字输入框组件实战来谈谈简单的组件开发. 源代码:数字输入框组件 项目整体结构 ├── src  项目代码 │ ├── common 公共js库 │ │ ├── number.js 判断是否为数字 │ ├── components 组件 │ │ ├── inputCount.vue 数字输入框组件 │ │ ├── inputNumber.vue 数字输

  • vue时间线组件的使用方法

    本文实例为大家分享了vue时间线组件的具体实现代码,供大家参考,具体内容如下 效果 vue-时间线组件(时间轴组件)代码 <template> <ul class="timeline-wrapper"> <li class="timeline-item" v-for="t in timelineList" :key="t.id"> <div class="timeline-b

随机推荐