【Element-UI-日期选择，开始时间不晚于结束时间，结束时间不早于开始时间，选择其中一个，另一个限制可选中范围】

最新推荐文章于 2025-04-01 16:30:35 发布

Sunshine_Jian

最新推荐文章于 2025-04-01 16:30:35 发布

阅读量1.6k

点赞数 3

分类专栏： ElementUI 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Sunshine_Jian/article/details/122407259

版权

ElementUI 专栏收录该内容

12 篇文章

订阅专栏

场景：form表单包含开始时间与结束时间，为防止开始日期晚于结束日期；或者是结束日期早于开始日期；必须控制日期的可选区域；

效果：

关键代码：

第一步：在日期组件上添加 :picker-options=" "

<el-form-item size="small" label="开始日期：" prop="start_time">
	<el-date-picker clearable size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="from.start_time"
	 type="date" placeholder="请选择开始日期" :picker-options="pickerStartOptions">
	</el-date-picker>
</el-form-item>
<el-form-item size="small" label="结束日期：" prop="end_time">
	<el-date-picker clearable size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="from.end_time"
	 type="date" placeholder="请选择结束日期" :picker-options="pickerEndOptions">
	</el-date-picker>
</el-form-item>

第二步：在data里绑定相应的数据 pickerStartOptions 、pickerEndOptions；

data(){
    return {
        // 表单绑定数据
        form:{
            start_time:'',// 开始日期
            end_time:'',// 结束日期
        },
        // 关联两个日期选择器，按日期先后顺序的设置规则
        // 选择的开始日期
        pickerStartOptions: {
            disabledDate: (time) => {
                if (this.form.end_time) {
                    return time.getTime() > new Date(this.form.end_time + ' 23:59:59').getTime()
                }
            }
        },
        // 选择的结束日期
        pickerEndOptions: {
            disabledDate: (time) => {
                if (this.form.start_time) {
                    return time.getTime() < new Date(this.form.start_time + ' 00:00:00').getTime()
                }
            }
        }
    }
}