限制范围的日期选择器

最新推荐文章于 2024-04-27 17:17:10 发布

立志当咸鱼

最新推荐文章于 2024-04-27 17:17:10 发布

阅读量343

点赞数 1

分类专栏： vue 文章标签： javascript html elementui

本文链接：https://blog.csdn.net/weixin_44886300/article/details/120409032

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

简单记录

项目场景：

限制起始时间和结束时间的日期选择范围，即在选定起始时间，结束时间只能选择在起始时间之后；选定结束时间，起始时间只能选择在结束时间之前。

如图：
在这里插入图片描述

解决方案：

<template>
    <div class="m-window">
        <el-row :gutter="10">
            <el-form
                label-width="70px"
                :inline-message="true"
                label-position="left">
                <el-col :span="5">
                    <el-form-item label="起始时间" > 
                        <el-date-picker
                            v-model="startDate"
                            type="date"
                            placeholder="请选择起始时间"
                            value-format="yyyy-MM-dd"
                            :picker-options="stOptions"
                            :editable="false"
                            :clearable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="结束时间" > 
                        <el-date-picker
                            v-model="endDate"
                            type="date"
                            placeholder="请选择结束时间"
                            value-format="yyyy-MM-dd"
                            :picker-options="etOptions"
                            :editable="false"
                            :clearable="false">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>

<script>
export default {
    data(){
        return{
            startDate:'',   //起始时间
            endDate:'', //结束时间
            //开始日期范围限制   
			stOptions: {
				disabledDate: this.disabledStartDate
			},
			//结束日期范围限制  
			etOptions: {
				disabledDate: this.disabledEndDate
			},
        }
    },
    methods:{
        //限制开始日期选择范围
        disabledStartDate(time){
            if(this.endDate){
                return time.getTime() > new Date(this.endDate).getTime()
            }
        },
        //限制结束日期选择范围
        disabledEndDate(time){
            if(this.startDate){
                return time.getTime() < (new Date(this.startDate).getTime()- 3600 * 1000 * 24)
            }
        },
    }
}
</script>