前端日期选择器el-date-picker 加时间限制

最新推荐文章于 2024-07-25 07:30:00 发布

R_如鲸向海

最新推荐文章于 2024-07-25 07:30:00 发布

阅读量591

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_47806588/article/details/131685961

版权

html：

            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="学年名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="form.title" placeholder="请输入学年名称" style="width: 320px;"></el-input>
                </el-form-item>
                <el-form-item label="第一学期" :label-width="formLabelWidth" prop="first_set">
                    <span>学期时间</span>
                    <el-date-picker v-model="form.first_start_at" type="date" placeholder="选择日期" class="date_picker" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd":picker-options="pickerOptions0"></el-date-picker>
                    <span>至</span>
                    <el-date-picker v-model="form.first_end_at" type="date" placeholder="选择日期" class="date_picker" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd":picker-options="pickerOptions1"></el-date-picker>
                </el-form-item>
                <el-form-item label="第二学期" :label-width="formLabelWidth" prop="second_set">
                    <span>学期时间</span>
                    <el-date-picker v-model="form.second_start_at" type="date" placeholder="选择日期" class="date_picker" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd":picker-options="pickerOptions2"></el-date-picker>
                    <span>至</span>
                    <el-date-picker v-model="form.second_end_at" type="date" placeholder="选择日期" class="date_picker" format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd":picker-options="pickerOptions3"></el-date-picker>
                </el-form-item>
                <el-form-item label="学年时间" :label-width="formLabelWidth">
                    <span v-if="this.form.first_start_at && this.form.second_end_at">{{ this.form.first_start_at + '-' + this.form.second_end_at }}</span>
                </el-form-item>
            </el-form>

js：

                pickerOptions0: {
                    disabledDate:(time)=> { return time.getTime() > new Date(this.form.first_end_at).getTime(); }
                },
                pickerOptions1: {
                    disabledDate:(time)=> { return time.getTime() < new Date(this.form.first_start_at).getTime() || time.getTime() > new Date(this.form.second_start_at).getTime(); }
                },
                pickerOptions2: {
                    disabledDate:(time)=> { return time.getTime() < new Date(this.form.first_end_at).getTime(); }
                },
                pickerOptions3: {
                    disabledDate:(time)=> { return time.getTime() < new Date(this.form.second_start_at).getTime(); }
                },

注意：两个日期的限制条件用或 ||

                    disabledDate:(time)=> { return time.getTime() < new Date(this.form.first_start_at).getTime() || time.getTime() > new Date(this.form.second_start_at).getTime(); }