iview UI 两个日期选择框相互禁止时间范围选择

最新推荐文章于 2023-08-03 16:39:56 发布

YGangCSDN

最新推荐文章于 2023-08-03 16:39:56 发布

阅读量356

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/YGangCSDN/article/details/131247013

版权

记录一下直接上代码 vue+iview UI

<template>
    <div>
        <DatePicker transfer :value="form.xmqzsj" @on-change="form.xmqzsj = $event, xmqzsjChange" type="daterange"
            placement="bottom-end" format="yyyy-MM-dd" />
        <DatePicker transfer :value="form.bmqzsj" @on-change="form.bmqzsj = $event, bmqzsjChange" type="daterange"
            placement="bottom-end" format="yyyy-MM-dd" />
    </div>
</template>

<script>
export default {

    data() {
        //报名时间只能选择项目开始时间之前的
        const bmDisabledDate = (date) => {
            const [start, end] = Array.isArray(this.form.xmqzsj) ? this.form.xmqzsj : [];
            if (this.form.xmqzsj.length == 0) return;
            return date && (date.valueOf() > Date.parse(start));
        };
        //项目时间只能选择报名结束时间之后的
        const xmDisabledDate = (date) => {
            const [start, end] = Array.isArray(this.form.bmqzsj) ? this.form.bmqzsj : [];;
            return date && (date.valueOf() < Date.parse(end));
        };
        return {
            //报名的截止时间要在项目开始时间之前
            bmDisabledDate,
            xmDisabledDate,
            //项目禁止参数
            optionXm: { disabledDate: null },
            //报名禁止参数
            optionBm: { disabledDate: null },
            form: {
                bmqzsj: [],
                xmqzsj: []
            },
        };
    },

    methods: {
        bmqzsjChange() {
            this.optionBm.disabledDate = (date) => this.bmDisabledDate(date);
        },
        xmqzsjChange() {
            this.optionXm.disabledDate = (date) => this.xmDisabledDate(date);
        },
    },
};
</script>