基于vue2+elementUI年份范围选择器

已于 2024-02-21 10:13:34 修改
阅读量2.4k 收藏 9
点赞数 13
文章标签： elementui vue.js javascript
于 2023-12-29 14:13:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanlc8888/article/details/135289635
版权

基于vue2+elementUI实现年份范围选择器，支持时间跨度设置。代码如下：

<template>
    <el-popover
        ref="popover"
        placement="bottom"
        v-model="showPanel"
        popper-class="custom_year_range"
        trigger="manual"
        @hide="onHide()"
        v-clickoutside="
            () => {
                showPanel = false;
            }
        ">
        <div class="_inner floatPanel">
            <div class="_inner leftPanel">
                <div class="_inner panelHead">
                    <i class="_inner el-icon-d-arrow-left" @click="onClickLeft"></i>
                    <span>
                        {{ leftYearList[0] + '年 ' + '- ' + leftYearList[9] + '年' }}
                    </span>
                </div>
                <div class="_inner panelContent">
                    <div
                        :class="{
                            oneSelected: item === startYear && oneSelected,
                            startSelected: item === startYear,
                            endSelected: item === endYear,
                            betweenSelected: item > startYear && item < endYear,
                            disabledSelect: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
                        }"
                        v-for="item in leftYearList"
                        :key="item">
                        <a
                            :class="{
                                cell: true,
                                _inner: true,
                                selected: item === startYear || item === endYear,
                                isDisabled: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
                            }"
                            @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>
                    <span>{{ rightYearList[0] + '年 ' + '- ' + rightYearList[9] + '年' }}</span>
                </div>
                <div class="_inner panelContent">
                    <div
                        :class="{
                            startSelected: item === startYear,
                            endSelected: item === endYear,
                            betweenSelected: item > startYear && item < endYear,
                            disabledSelect: compareNum && (compareNum - maxRange > item || compareNum + maxRange < item)
                        }"
                        v-for="item in rightYearList"
                        :key="item">
                        <a
                            :class="{
                                cell: true,
                                _inner: true,
                                isDisabled:
                                    compareNum && (compareNum - maxRange > item || compareNum + maxRange < item),
                                selected: item === endYear || item === startYear
                            }"
                            @click="onClickItem(item)"
                            @mouseover="onHoverItem(item)">
                            {{ item }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div slot="reference">
            <div
                ref="yearPicker"
                @mouseenter="startShowYear && endShowYear && (showClearIcon = true)"
                @mouseleave="showClearIcon = false"
                class="yearPicker el-date-editor el-range-editor el-input__inner el-date-editor--daterange el-range-editor--small">
                <i class="el-input__icon el-range__icon el-icon-date"></i>
                <input
                    class="_inner range_input"
                    ref="inputLeft"
                    type="text"
                    name="yearInput"
                    :placeholder="startPlaceholder"
                    v-model="startShowYear"
                    @focus="onFocus"
                    @keyup="handleInput('start')" />
                <span class="el-range-separator">{{ sp }}</span>
                <input
                    class="_inner range_input"
                    ref="inputRight"
                    type="text"
                    name="yearInput"
                    :placeholder="endPlaceholder"
                    v-model="endShowYear"
                    @focus="onFocus"
                    @keyup="handleInput('end')" />
                <i
                    v-if="showClearIcon && clearable"
                    class="el-icon-circle-close clearIcon"
                    @click.prevent="onClickClear()"></i>
            </div>
        </div>
    </el-popover>
</template>

<script>
import moment from 'moment';
import {clickoutside} from '../directives/directives.m.js';
const SELECT_STATE = {
    unselect: 0,
    selecting: 1,
    selected: 2
};
export default {
    name: 'yearPicker',
    directives: {clickoutside},
    computed: {
        oneSelected() {
            return (
                this.curState === SELECT_STATE.selecting && (this.startYear === this.endYear || this.endYear == null)
            );
        },
        leftYearList() {
            return this.yearList.slice(0, 10);
        },
        rightYearList() {
            return this.yearList.slice(10, 20);
        }
    },
    props: {
        sp: {
            default: '至'
        },
        value: {
            default: null
        },
        startPlaceholder: {
            type: String,
            default: '开始年份'
        },
        endPlaceholder: {
            type: String,
            default: '结束年份'
        },
        clearable: {
            type: Boolean,
            default: false
        },
        // 是否需要限制时间跨度 配合maxRange使用
        hasDisabled: {
            type: Boolean,
            default: false
        },
        // 时间跨度 必须与hasDisabled配合使用才生效
        maxRange: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            itemBg: {},
            startShowYear: null,
            endShowYear: null,
            yearList: [],
            showPanel: false,
            startYear: null,
            endYear: null,
            curYear: 0,
            curSelectedYear: 0,
            curState: SELECT_STATE.unselect,
            showClearIcon: false,
            compareNum: 0
        };
    },
    methods: {
        handleInput(type) {
            switch (type) {
                case 'start':
                    if (isNaN(this.startShowYear)) {
                        this.startShowYear = this.startYear;
                        return;
                    }
                    this.startYear = this.startShowYear * 1;
                    break;
                case 'end':
                    if (isNaN(this.endShowYear)) {
                        this.endShowYear = this.endYear;
                        return;
                    }
                    this.endYear = this.endShowYear * 1;
                    break;
            }
            [this.startYear, this.endYear] = [this.endYear, this.startYear];
            this.startShowYear = this.startYear;
            this.endShowYear = this.endYear;
        },
        onHoverItem(iYear) {
            if (this.hasDisabled) {
                if (iYear > this.compareNum + this.maxRange || iYear < this.compareNum - this.maxRange) {
                    return;
                }
            }
            if (this.curState === SELECT_STATE.selecting) {
                const tmpStart = this.curSelectedYear;
                this.endYear = Math.max(tmpStart, iYear);
                this.startYear = Math.min(tmpStart, iYear);
            }
        },
        async onClickItem(selectYear) {
            if (this.hasDisabled) {
                if (
                    this.compareNum &&
                    (selectYear > this.compareNum + this.maxRange || selectYear < this.compareNum - this.maxRange)
                ) {
                    return;
                }
            }
            if (this.curState === SELECT_STATE.unselect || this.curState === SELECT_STATE.selected) {
                this.startYear = selectYear;
                this.curSelectedYear = selectYear;
                this.endYear = null;
                this.curState = SELECT_STATE.selecting;
                if (this.hasDisabled) {
                    this.compareNum = selectYear;
                }
            } else if (this.curState === SELECT_STATE.selecting) {
                this.endShowYear = this.endYear || this.startYear;
                this.startShowYear = this.startYear;
                this.curState = SELECT_STATE.selected;
                await this.$nextTick();
                this.showPanel = false;
                this.$emit('picker-change', [this.startShowYear, this.endShowYear]);
                // this?.$parent?.$parent?.$parent?.$parent?.$parent.clearValidate?.();
            }
        },
        async onFocus() {
            if (this.value?.length) {
                const [first, end] = this.value || [];
                this.startYear = first || null;
                this.endYear = end || null;
                this.curState = SELECT_STATE.selected;
                this.startShowYear = first;
                this.endShowYear = end;
                this.updateYearList();
                this.compareNum = 0;
            }
            await this.$nextTick();
            this.showPanel = true;
        },
        updateYearList() {
            const startYear = ~~(this.curYear / 10) * 10 - 10;
            this.yearList = [];
            for (let index = 0; index < 20; index++) {
                this.yearList.push(startYear + index);
            }
        },
        onClickLeft() {
            this.curYear = this.curYear * 1 - 10;
            this.updateYearList();
        },
        onClickRight() {
            this.curYear = this.curYear * 1 + 10;
            this.updateYearList();
        },
        onClickClear() {
            this.startYear = null;
            this.endYear = null;
            this.startShowYear = null;
            this.endShowYear = null;
            this.curState = SELECT_STATE.selected;
            this.curYear = moment().format('yyyy');
            this.updateYearList();
            this.$emit('picker-change', []);
        },
        onHide() {
            this.startYear = null;
            this.endYear = null;
            this.curState = SELECT_STATE.selected;
            this.curYear = moment().format('yyyy');
            this.updateYearList();
        }
    },
    watch: {
        value: {
            handler(val) {
                if (val?.length === 0) {
                    return;
                }
                const [first, end] = val || [];
                this.startShowYear = first;
                this.endShowYear = end;
            },
            immediate: true,
            deep: true
        },
        startShowYear: {
            handler(val) {
                this.$emit('input', [val, this.endShowYear || '']);
            },
            immediate: true,
            deep: true
        },
        endShowYear: {
            handler(val) {
                this.$emit('input', [this.startShowYear || '', val]);
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        const [startYear, endYear] = this.value || [];
        if (startYear) {
            this.startYear = Number(startYear);
            this.endYear = Number(endYear);
            this.curState = SELECT_STATE.selected;
            this.curYear = startYear;
        } else {
            this.curYear = moment().format('yyyy');
        }
        this.updateYearList();
    },

    mounted() {
        window.Vue = this;
    }
};
</script>
<style lang="scss">
.custom_year_range {
    .floatPanel {
        > div {
            width: 50%;
        }
        padding: 0 16px;
        display: flex;
        background-color: #fff;
        z-index: 2000;
        border-radius: 4px;
        width: 650px;
        height: 250px;
        top: 40px;
        left: -50px;
        .panelContent {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            height: calc(100% - 70px);
            .oneSelected {
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }
            .startSelected {
                background-color: #f2f6fc;
                border-top-left-radius: 24px;
                border-bottom-left-radius: 24px;
            }
            .endSelected {
                background-color: #f2f6fc;
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }
            .betweenSelected {
                background-color: #f2f6fc;
            }
            .disabledSelect {
                background-color: #f5f5f5;
                cursor: not-allowed;
            }
            > div {
                width: 75px;
                height: 48px;
                line-height: 48px;
                margin: 3px 0;
                text-align: center;
                a {
                    display: inline-block;
                    cursor: pointer;
                    width: 60px;
                    height: 36px;
                    line-height: 36px;
                    border-radius: 18px;
                    &:hover {
                        // color: #4088fe;
                        text-decoration: none;
                        cursor: pointer;
                    }
                }
                a.isDisabled:hover {
                    color: #4088fe;
                    text-decoration: none;
                    cursor: not-allowed !important;
                }
                .selected {
                    background-color: #4088fe;
                    color: #fff;
                    &:hover {
                        color: #fff !important;
                    }
                }
            }
        }
        .panelHead {
            position: relative;
            height: 46px;
            line-height: 46px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: 16px;
                font-weight: 500;
                padding: 0 5px;
                line-height: 22px;
                text-align: center;
                cursor: pointer;
                color: #606266;
                &:hover {
                    color: #4088fe;
                }
            }
            i {
                position: absolute;
                cursor: pointer;
                &:hover {
                    color: #3e77fc;
                }
            }
        }
        .rightPanel {
            padding-left: 8px;
        }
        .leftPanel .panelHead i {
            left: 20px;
        }
        .rightPanel .panelHead i {
            right: 20px;
        }
    }
    .floatPanel::before {
        content: '';
        height: 100%;
        top: 0;
        position: absolute;
        left: 50%;
        width: 1px;
        border-left: 1px solid #e4e4e4;
    }
    .el-range-separator {
        min-width: 24px;
        border: 1px solid #e4e4e4;
    }
}
</style>
<style lang="scss" scoped>
.yearPicker {
    width: 290px;
    .range_input {
        appearance: none;
        border: none;
        outline: 0;
        padding: 0;
        width: 40%;
        color: #606266;
        line-height: 1;
        height: 100%;
        margin: 0;
        text-align: center;
        display: inline-block;
    }
    .clearIcon {
        height: 32px;
        line-height: 32px;
        position: absolute;
        right: 8px;
        color: #c0c4cc;
        transition: all 0.3;
    }
    .el-range-separator {
        min-width: 24px;
    }
}

// 自定义指令
export const clickoutside = {
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding && binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                if (binding.value && binding.value(e)) {
                    binding.value(e);
                }
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
    }
};

效果图如下： 

因为项目工期比较赶，功能可能会存在缺陷，码友们若有发现，请留言告知，感谢！

fanlcwowo
关注
elementUI 年份范围选择器实现
Moon Star
07-02 2129
elementUI 不支持年份范围的选择器，手动实现此组件；
element日期选择范围、选择年份范围
weixin_49460669的博客
11-21 1425
根据业务需求elemet-ui使用日期选择范围只能选择年份范围，element-ui只有选择日期，月份范围不支持选择年份范围，为实现业务需求研究了类似element-ui日期选择器选择年份，代码如下。使用timeDate方法可以获取到选中的年份值。功能还有不足点，欢迎各位互相交流。代码如下：对年份选择范围进去封装。utils.js文件。
elementUI日期范围选择组件实现日期选择跨度最多一年
最新发布
phoenix_main的web之路的历程
09-20 285
【代码】elementUI日期范围选择组件实现日期选择跨度最多一年。
element-ui的年份范围选择器，选择的年份需等于或小于当前年份，选择的年份范围必须在三年之内
DecorateCC的博客
04-09 2397
希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~❤️原创不易，期待你的关注与支持~😊之后我会继续更新前端学习小知识，关注我不迷路~
基于element-ui的年份范围选择器
farme_guan的博客
09-15 3846
调用方法,下面的参数和element-ui原有el-date-picker的api保持不变。，以下是我的目录结构，我将下载的文件放到了src/components下。日期限制处理（禁用），下面我以我这边的需求为例，全局引入或者局部引入使用。下载对应的代码到本地。
Vue2 elementUI年份区间选择组件
u010994219的专栏
01-13 9320
问题：elementUI中有日期范围组件，月份范围选择的，就是没有年份范围选择的，需要加一个类似风格的。 先看月份的范围选择效果： 在看实际实现效果（因为我们主题是自定义风格，所以颜色有些差异，可以调整）： <template> <div class="yearPicker" ref="yearPicker" :width="width"> <input ref="inputLeft" v-model="startS...
vue2年份范围选择器
weixin_72280817的博客
08-22 299
照着element-ui写了一个年份范围选择，记录一下，以下可以当作组件引入后直接使用。工作的时候有个需求是选择年份范围，但是element-ui里面没有直接可以使用的。
vue+elementui实现日期时间控件分钟固定步长（完整案例及效果图）.zip
02-15
而Element UI则是一个基于Vue.js的组件库，提供了丰富的UI组件，如表格、按钮、提示、日期选择器等，极大地加速了前端开发过程。 首先，我们需要在项目中引入Element UI。这可以通过在`main.js`文件中添加以下代码...
Vue+ElementUI+C#技巧分享：周数选择器
Dotnet Technology Blog
01-21 1261
Vue.js和ElementUI的结合使用已成为创建高效、美观和用户友好的Web应用的一种流行方式。特别是在处理复杂的用户界面和交互时，这种组合展现出其独特的优势。这篇博客旨在深入探讨如何利用Vue和ElementUI来构建一个实用的周数选择器。周数选择器在很多类型的应用程序中都非常重要，尤其是在需要日期管理的系统中，如日历应用、项目管理工具或报告系统。正确地理解和计算周数对于确保数据的准确性和用户界面的一致性至关重要。然而，由于不同地区和标准对周的定义存在差异，开发这样的功能可能会带来挑战。
【vue+elementui】时间选择器：时间格式、设置时间最大日期或最小日期、设置时间选择范围
OG
11-06 7924
时间格式 新版的elementui新增了定义时间格式的属性value-format，这样就不用再自己写js在各种格式间转换。 例： 下面例子在获取startDate时返回的就是’2019-11-06 11:17:13’ <el-date-picker v-model="startDate" type="date" :value-format="'yyyy-MM-dd HH:mm:ss'"&...
vue + elementUI 默认选中当前年，其他年份的获取
m0_38109616的博客
11-17 401
vue + elementUI 默认选中当前年，其他年份的获取
一个Vue2日期范围选择控件
08-10
一个Vue2日期范围选择控件
vue3+element plus+ts的日期控件的选择时间范围
active_lm的博客
07-11 1978
需求：日期控件的查询支持查询跨度不超过一年，选择时间的时候日期控件上限制时间跨度不超过一年
ElementUI 年份范围选择器 el-year-picker
予歌的博客
05-10 4841
/ 选择年份范围选择时开始时间不能大于结束时间，结束时间不能小于开始时间。// 提出开始时间必须小于提出结束时间。// 提出结束时间必须大于提出开始时间。// 接收父组件传入的数据。
VUE 年份范围选择器
qq_38327141的博客
02-07 3000
在使用elment UI的时候发现没有这种功能,于是采用el-date-picker 的年份选择器自己后封装了一个年份范围选择器。由于组件使用的地方很多,所以格式化都在组件中处理,回传格式在回传的 input 事件参数中自己修改。遇到一个需求,需要写一个年份选择器,是范围的年份选择器,比如:xxx年到xxx年。
ElementUI 年份范围选择器
Iswayzw的博客
11-26 7850
本文实现的年份范围选择组件具有基本的年份范围选择功能。借助Vue的组件特性，能够灵活应用到页面任何位置。基于组件通信，能够优雅的管理数据。
vue element-ui年份范围选择器，年日期插件，可选日期区间等
xingchen678的博客
02-07 3517
element-ui年份范围选择器,日期插件
【vue 时间区域选择和 年份选择】
迷迷糊糊，懵懵懂懂
01-09 997
【代码】【vue 时间区域选择和 年份选择】
Element封装年度范围选择器
qq_40431271的博客
10-19 1166
Element实现的年度范围选择器
Vue+ElementUI级联选择器Bug修复与优化
在Vue+ElementUI的集成开发过程中，级联选择器是常用的一种组件，它能够实现层级关系的数据展示和选择。然而，开发者可能会遇到一个特定的Bug，当后端返回的数据采用递归结构，且递归到最后一级时，部分数据可能缺失...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值