vue+elementUI日期选择组件

最新推荐文章于 2025-10-18 16:01:58 发布

原创最新推荐文章于 2025-10-18 16:01:58 发布 · 520 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

vue 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在表单中实现日期组件，包括设置日期范围限制（从今天开始到未来），并演示了如何使用ElDatePicker和RadioGroup组件来控制日期选择和有效期选项。

实现功能如下：
1.日期组件可选择生效时效输入
2.可控制输入日期为今天到未来

 <el-form-item label="生效时间" prop="effectTime">
            <el-date-picker
              v-model="form.effectTime"
              style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
              **:picker-options="pickerOptions"**
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="有效期" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in statusOptions"
                :key="dict.value"
                :label="dict.value"
              >{{ dict.label }}</el-radio
              >
            </el-radio-group>
            <el-date-picker v-model="form.effectEndTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime" placeholder="选择日期时间" v-if="this.form.status==1"  :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>

**js**
data() {
      return {
        // 设置只能选择当前日期及之后的日期
        pickerOptions: {
          disabledDate(time) {
            //如果没有后面的-8.64e7就是不可以选择今天的
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        }
        }
method:
 statusOptions: Object.freeze([
          { label: '永久', value: '2' },
          { label: '输入有效期', value: '1' }
        ]),