elementui时间选择器进行时间限制

最新推荐文章于 2025-05-15 16:17:29 发布

前端打工仔小剑儿

最新推荐文章于 2025-05-15 16:17:29 发布

阅读量331

点赞数

分类专栏： elementui

本文链接：https://blog.youkuaiyun.com/qq_36656410/article/details/120901779

版权

elementui javascript

elementui 专栏收录该内容

3 篇文章

订阅专栏

这段代码展示了如何在Vue中使用Element UI的日期选择器组件来设置作品完成日期和发表日期的限制。通过`disabledDate`属性，确保发表日期不能早于完成日期且不能晚于当前日期，同时完成日期也不能晚于当前日期。这种做法有助于在前端实现数据输入的合理性校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html部分

<el-form-item label="作品完成日期" prop="complete_date">
                    <el-date-picker v-model="ruleForm.complete_date" type="date" placeholder="作品完成日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>


<el-form-item label="作品发表日期" prop="first_publish_date">
                        <el-date-picker v-model="ruleForm.first_publish_date" type="date" placeholder="作品发表日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" :picker-options="pickerOptions1">
                        </el-date-picker>
                    </el-form-item>

js部分

data() {
        return {
            ruleForm: {
                complete_date: "",
                first_publish_date: "",
            },
            pickerOptions1: {
                // 发表时间小于今天而且大于等于完成时间
                disabledDate: time => {
                     return (
                        time.getTime() < new Date(this.ruleForm.complete_date).getTime()*1 - 24 * 60 * 60 * 1000 || time.getTime() > new Date( new Date()).getTime()
                    ); 
                }
            },
            pickerOptions2: {
                // 完成时间小于今天而且小于等于发表时间
                disabledDate: time => {
                    return (
                       time.getTime() > new Date(this.ruleForm.first_publish_date).getTime() * 1 - 24 * 60 * 60 * 1000 ||  time.getTime() > new Date( new Date()).getTime()
                    ); 
                }
            },
        }
}