Vue2 elementUI年份区间选择组件

已于 2024-08-12 14:09:25 修改
阅读量1w 收藏 35
点赞数 13
文章标签： elementui vue.js 前端
于 2022-01-13 11:03:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/nithumahel/article/details/122469114
版权

环境：

"dependencies": {
    "axios": "^0.19.0",

    "element-ui": "^2.9.2",

    "vue": "^2.6.10",
    "vue-clipboard2": "^0.3.1",

    "vue-json-pretty": "^1.7.1",
    "vue-router": "^3.0.3",

    "vuex": "^3.1.0",

  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.5",
    "@vue/cli-plugin-eslint": "^3.5.1",
    "@vue/cli-service": "^3.5.3",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "file-saver": "^2.0.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10"
  },

问题：elementUI中有日期范围组件，月份范围选择的，就是没有年份范围选择的，需要加一个类似风格的。

先看月份的范围选择效果：

在看实际实现效果（因为我们主题是自定义风格，所以颜色有些差异，可以调整）： 

<template>
    <div class="yearPicker" ref="yearPicker" :style="{ width: width + 'px' }">
        <div class="_inner labelText" :style="{ width: labelWidth + 'px' }">{{ labelText }}</div>
        <input class="_inner" ref="inputLeft" v-model="startShowYear" @focus="onFocus" type="text" @click="clickInput"
            name="yearInput" @input="checkStartInput($event)" placeholder="选择年份" />
        <span>{{ sp }}</span>
        <input class="_inner" ref="inputRight" v-model="endShowYear" @focus="onFocus" type="text" @click="clickInput"
            name="yearInput" @input="checkEndInput($event)" placeholder="选择年份" />
        <div class="_inner floatPanel" v-if="showPanel">
            <div class="_inner leftPanel">
                <div class="_inner panelHead">
                    <i class="_inner el-icon-d-arrow-left" @click="onClickLeft"></i>
                    {{ leftYearList[0] + "-" + leftYearList[9] }}
                </div>
                <div class="_inner panelContent">
                    <div v-for="item in leftYearList" :class="{
                        disabled: checkValidYear(item)!= 0,
                        oneSelected: item === startYear && oneSelected,
                        startSelected: item === startYear,
                        endSelected: item === endYear,
                        _inner: true,
                        betweenSelected: item > startYear && item < endYear
                    }" :key="item">
                        <a :class="{
                            cell: true,
                            _inner: true,
                            selected: item === startYear || item === endYear
                        }" @click="onClickItem(item)" @mouseover="onHoverItem(item)">
                            {{ item }}
                        </a>
                    </div>
                </div>
            </div>
            <div class="_inner rightPanel">
                <div class="_inner panelHead">
                    <i class="_inner el-icon-d-arrow-right" @click="onClickRight"></i>
                    {{ rightYearList[0] + "-" + rightYearList[9] }}
                </div>
                <div class="_inner panelContent">
                    <div :class="{
                        disabled: checkValidYear(item) != 0,
                        startSelected: item === startYear,
                        endSelected: item === endYear,
                        betweenSelected: item > startYear && item < endYear
                    }" v-for="item in rightYearList" :key="item">
                        <a :class="{
                            cell: true,
                            _inner: true,
                            selected: item === endYear || item === startYear
                        }" @click="onClickItem(item)" @mouseover="onHoverItem(item)">
                            {{ item }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
const SELECT_STATE = {
    unselect: 0,
    selecting: 1,
    selected: 2,
};
export default {
    name: "YearPicker",
    computed: {
        oneSelected() {
            return (
                this.curState === SELECT_STATE.selecting &&
                (this.startYear === this.endYear || this.endYear == null)
            );
        },
        startDate() {
            return this.startYear;
        },
        leftYearList() {
            return this.yearList.slice(0, 10);
        },
        rightYearList() {
            return this.yearList.slice(10, 20);
        }

    },
    props: {
        width: {
            default: 200,
        },
        labelWidth: {
            default: 80,
        },
        labelText: {
            default: "时间标签",
        },
        sp: {
            default: "至",
        },
        initYear: {
            default: null,
        },
    },
    data() {
        return {
            itemBg: {},
            startShowYear: null,
            endShowYear: null,
            yearList: [],
            showPanel: false,
            startYear: null,
            endYear: null,
            curYear: 0,
            curSelectedYear: 0,
            curState: SELECT_STATE.unselect,
        };
    },
    methods: {
        checkValidYear(iYear) {
            if (this.initYear) {
                if (iYear > this.initYear.endYear) {
                    return 1
                } else if (iYear < this.initYear.startYear) {
                    return -1
                }
            }
            return 0
        },
        checkStartInput(event) {
            if (isNaN(this.startShowYear)) {
                this.startShowYear = this.startYear;
            } else {
                this.startYear = this.startShowYear * 1;
            }
        },

        checkEndInput() {
            if (isNaN(this.endShowYear)) {
                this.endShowYear = this.endYear;
            } else {
                this.endYear = this.endShowYear * 1;
            }
        },
        changeYear() {
            if (this.startYear > this.endYear) {
                let tmp = this.endYear;
                this.endYear = this.startYear;
                this.startYear = tmp;

            }
            if (this.initYear) {
                this.startYear = Math.max(this.startYear, this.initYear.startYear)
                this.endYear = Math.min(this.endYear, this.initYear.endYear)
            }
            this.startShowYear = this.startYear;
            this.endShowYear = this.endYear;


            if (this.startYear && this.endYear) {
                this.$emit("updateTimeRange", {
                    startYear: this.startYear,
                    endYear: this.endYear + ""
                });
            } else {
                console.warn("WARN:年份不合法", this.startYear, this.endYear);
            }
        },
        onHoverItem(iYear) {
            if (this.checkValidYear(iYear) != 0) {
                return;
            }
            if (this.curState === SELECT_STATE.selecting) {
                let tmpStart = this.curSelectedYear;
                this.endYear = Math.max(tmpStart, iYear);
                this.startYear = Math.min(tmpStart, iYear);
            }
        },
        onClickItem(iYear) {
            if (this.checkValidYear(iYear) != 0) {
                return;
            }

            if (
                this.curState === SELECT_STATE.unselect ||
                this.curState === SELECT_STATE.selected
            ) {
                this.startYear = iYear;
                this.curSelectedYear = iYear;
                this.endYear = null;
                this.curState = SELECT_STATE.selecting;
            } else if (this.curState === SELECT_STATE.selecting) {
                this.endShowYear = this.endYear;
                this.startShowYear = this.startYear;
                this.curState = SELECT_STATE.selected;
                this.$emit("updateTimeRange", {
                    startYear: this.startYear,
                    endYear: this.endYear,
                });

                setTimeout(() => {
                    //为动画留的时间，可优化
                    this.showPanel = false;
                }, 300);
            }
        },
        onFocus() {
            this.$nextTick(() => {
                this.showPanel = true;
            });
        },
        clickInput(e) {
            e.stopPropagation();
            return false;
        },

        updateYearList() {
            let iStart = Math.floor(this.curYear / 10) * 10 - 10;
            iStart = iStart < 0 ? 0 : iStart;
            this.yearList = [];
            for (let index = 0; index < 20; index++) {
                this.yearList.push(iStart + index);
            }
        },

        checkValidYear(iYear) {
            if (this.initYear) {
                if (iYear > this.initYear.endYear) {
                    return 1
                } else if (iYear < this.initYear.startYear) {
                    return -1
                }
            }
            return 0
        },
        closePanel(e) {
            if (!this.showPanel) {
                return;
            }
            if (typeof e.target.className !== "string" || e.target.className === "") {
                this.$nextTick(() => {
                    this.changeYear();
                    this.showPanel = false;
                });
                return;
            }
            if (
                e.target.className.indexOf("_inner") === -1 ||
                (e.target.name === "yearInput" &&
                    e.target !== this.$refs.inputLeft &&
                    e.target !== this.$refs.inputRight)
            ) {
                this.$nextTick(() => {
                    this.changeYear();
                    this.showPanel = false;
                });
            }

            e.stopPropagation();
            return false;
        },
        onClickLeft() {
            this.curYear = this.curYear * 1 - 10;
            this.updateYearList();
        },
        onClickRight() {
            this.curYear = this.curYear * 1 + 10;
            this.updateYearList();
        },

        //------------------对外接口------------------------
        // //直接传时间戳
        // setYear(startYearStamp, endYearStamp) {
        //     if (!isNaN(startYearStamp) && !isNaN(endYearStamp)) {
        //         let startYear = moment(startYearStamp).format("yyyy");
        //         let endYear = moment(endYearStamp).format("yyyy");
        //         this.startYear = startYear * 1;
        //         this.endYear = endYear * 1;
        //         this.endShowYear = endYear * 1;
        //         this.startShowYear = startYear * 1;
        //     }
        // },
    },

    created() {
        this.curYear = new Date().getFullYear();
        this.updateYearList();
    },
    beforeUnmount() {
        document.removeEventListener("click", this.closePanel.bind(this));
    },

    mounted() {
        document.addEventListener("click", this.closePanel.bind(this));
    },
};
</script>
<style lang="scss" scoped>
.yearPicker {
    font-size: 14px;
    display: flex;
    position: relative;
    transition: all 0.3s;
    input {
        text-align: center;
    }

    input:first-child {
        text-align: right;
    }

    background-color: #fff;

    .labelText {
        text-align: center;
    }

    span {
        padding: 0 8px;
        height: 32px;
        line-height: 32px;
    }

    border: 1px solid #eff1f3;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    padding: 0 28px 0 8px;
    box-sizing: border-box;

    .floatPanel {
        >div {
            width: 50%;
        }

        padding: 0 16px;
        position: absolute;
        display: flex;
        background-color: #fff;
        z-index: 2000;
        border-radius: 4px;
        width: 650px;
        height: 250px;
        top: 40px;
        left: -10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .panelContent {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: calc(100% - 70px);

            .disabled {
                color: #ccc;
            }

            .oneSelected {
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }

            .startSelected {
                background-color: #f6f6f7;
                border-top-left-radius: 24px;
                border-bottom-left-radius: 24px;
            }

            .endSelected {
                background-color: #f6f6f7;
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }

            .betweenSelected {
                background-color: #f6f6f7;
            }

            >div {
                width: 75px;
                height: 48px;
                line-height: 48px;
                margin: 3px 0;
                // border-radius: 24px;
                text-align: center;

                a {
                    display: inline-block;
                    width: 60px;
                    height: 36px;
                    cursor: pointer;
                    line-height: 36px;
                    border-radius: 18px;
                }

                .selected {
                    background-color: #3e77fc;
                    color: #fff;
                }
            }
        }

        .panelHead {
            position: relative;
            height: 46px;
            line-height: 46px;
            text-align: center;

            i {
                position: absolute;
                cursor: pointer;

                &:hover {
                    color: #3e77fc;
                }
            }
        }

        .rightPanel {
            padding-left: 8px;
        }

        .leftPanel .panelHead i {
            left: 20px;
            top:15px;
        }

        .rightPanel .panelHead i {
            right: 20px;
            top:15px;
        }
    }

    .floatPanel::before {
        content: "";
        height: 100%;
        position: absolute;
        left: 50%;
        width: 1px;
        border-left: 1px solid #e4e4e4;
    }
}

input {
    width: 60px;
    border: none;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    background-color: transparent;
}

input:focus {
    outline: none;
    background-color: transparent;
}

.yearPicker:hover {
    border-color: #3e77fc;
}

.dateIcon {
    position: absolute;
    right: 16px;
    top: 9px;
    color: #adb2bc;
}
</style>
  
  ​

调用方式：

   <YearPicker
              labelText="统计期"
              :width="300"
              :label-width="80"
              :initYear="dateValue2" 
              @updateTimeRange="updateStatisticYear"
            />

dateValue2调整为对象： dateValue2:{startYear:2000, endYear: new Date().getFullYear()},

updateTimeRange是选中之后的回调

 updateStatisticYear(startYear, endYear){
      console.log("看看回调：", startYear, endYear)
    },

2023/12/19更新：1，修复输入逻辑紊乱的bug。

                             2，处理scss版本不支持box-shadow rgb的bug 。

                             3，处理回调和传参都使用年份

                             4，优化点击关闭的效果

                             5，新增可选年份区间（区间外禁止点击和选择，同时校正输入）

                             6，删除了主动调用接口（看有没有需要，有需要后续处理一下）

                             7，删除了第三方库的依赖

 新增vue3 Element Plus支持：跳转电梯：http://t.csdnimg.cn/7rYpH（旧版本链接失效）

2024/8/12更新链接：：http://t.csdnimg.cn/0KPBF

Nithumahel
关注
vue element-ui年份范围选择器，年日期插件，可选日期区间等
xingchen678的博客
02-07 3691
element-ui年份范围选择器,日期插件
vue elementui时间控件，（单框同时选）范围选择周，季，年。
m0_67391518的博客
03-03 4566
一、效果图 因官网elementui仅有日和月的范围选择控件。所以下面开发了周季年，并放出周次。 二、版本及下载 1.实现需要修改源码，目前修改的版本为2.15.3，所以想要实现该方法，请先将elementui升级或者降到2.15.3. 2.将lib包替换到node_module/element-ui下的lib lib包下载地址：（没有积分的私聊我获取包） https://download.csdn.net/download/qq_39019765/44321511 三、代码中的使用 1.范围周：
vue2年份范围选择器
weixin_72280817的博客
08-22 441
照着element-ui写了一个年份范围选择，记录一下，以下可以当作组件引入后直接使用。工作的时候有个需求是选择年份范围，但是element-ui里面没有直接可以使用的。
基于 Vue 和 Element Plus 的时间范围控制与数据展示
最新发布
肥晨开发的学习之路
03-14 923
组件实现时间范围选择，并结合“日”、“月”、“年”按钮动态控制时间范围。：如果你觉得按钮样式不够酷炫，可以尝试添加动画效果或图标，让界面更生动哦！欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。本文将重点讲解如何在 Vue 项目中使用。
基于element-ui的年份范围选择器
farme_guan的博客
09-15 4562
调用方法,下面的参数和element-ui原有el-date-picker的api保持不变。，以下是我的目录结构，我将下载的文件放到了src/components下。日期限制处理（禁用），下面我以我这边的需求为例，全局引入或者局部引入使用。下载对应的代码到本地。
基于vue2+elementUI年份范围选择器
fanlc8888的博客
12-29 2782
基于vue2+elementUI实现年份范围选择器，支持时间跨度设置。
elementUI 年份范围选择器实现
Moon Star
07-02 3691
elementUI 不支持年份范围的选择器，手动实现此组件；
【vue 时间区域选择和 年份选择】
迷迷糊糊，懵懵懂懂
01-09 1268
【代码】【vue 时间区域选择和 年份选择】
element-ui的年份范围选择器，选择的年份需等于或小于当前年份，选择的年份范围必须在三年之内
DecorateCC的博客
04-09 2650
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
Vue2+ElementUI，日期选择器el-date-picker选择多个日期type=‘dates‘改造成可选择多段范围，选中范围内的某个日期则取消该日期的选择的组件
weixin_45701630的博客
01-13 776
饿了么elementui框架，时间选择器el-date-picker，多时间选择改造为多段范围选择，可以取消范围内所选日期。 实际上还是选择单个日期，将选择的第一个日期和第二个日期范围内的所有日期全选中。设置needFill变量，如果当前日期在已选范围外，则当前日期就是第一个日期，选中下一个日期将填满中间日期。 需要使用的主要方法有1、获取 [start,end] 范围内的所有日期；2、判断当前选择的日期是否在范围内；3、将已选日期分成多段范围
用element+vue制作季节选择器，可以选择开始时间和结束时间（组件）
xSakura007的博客
12-14 2027
代码如下： <template> <div> <mark style=" position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0); z-index: 999; " v-show="showSeason"
vuelCalendarswitch日期区间选择插件基于Vue开发
08-10
次组件可以选择起始日期，第一次点击为开始时间，第二次点击为结束时间。可以跨月份选择，跨年分选择。 支持个性化配置如： 最大选择区间、 是否开启动画效果、 限制区间选择范围天数、 是否开启周六日禁止点击、 禁用的日期。
一个Vue2日期范围选择控件
08-10
一个Vue2日期范围选择控件
elementui 时间选择区间
03-14
尽管 ElementUI 并未直接提供专门用于年份范围选择的组件，但可以借助 `el-date-picker` 组件及其属性配置来实现时间选择区间的功能。以下是具体实现方式： #### 方法概述 为了实现时间选择区间，通常会结合两个...
element-ui 时间范围组件( 可以选择区间的范围 )
xzx66666的博客
08-01 845
<template> <div> <h2>Welcome</h2> <el-card> <divclass="block"> <spanclass="demonstration">月</span> <el-date-pickerv-model="date"typ...
element ui 的 el-date-picker 日期选择组件设置可选日期范围
qq_30193097的博客
06-28 1310
【代码】element ui 的 el-date-picker 日期选择组件设置可选日期范围。
ElementUI DatePicker 日期选择器日期区间选择
oDianZi1234567的博客
10-28 1301
ElementUI DatePicker 日期选择器日期区间选择 官方样例 <template> <div class="block"> <span class="demonstration">默认</span> <el-date-picker v-model="value1" type="date"...
使用vue+vant自定义年月日时分秒选择组件
小鹿不在林间的博客
12-26 2044
vant自定义选择年月日时分秒的组件
elment-ui 日期选择器 月份区间选择的问题解决（含代码、截图）
草巾冒小子的博客
10-24 636
【代码】elment-ui 日期选择器 月份区间选择的问题解决（含代码、截图）
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值