实现功能如下:
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' }
        ]),

实现展示图:
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐