vue+elementUI日期选择组件

最新推荐文章于 2024-08-07 02:52:26 发布

@卓越俊逸_角立杰出@

最新推荐文章于 2024-08-07 02:52:26 发布

阅读量435

点赞数

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

本文链接：https://blog.csdn.net/leaning_java/article/details/122187167

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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