当前位置: 首页 > article >正文

设置指定时间之前的时间不可选

1、el-date-picker设置今天之前的日期不可选

<el-date-picker style="width: 100%" type="date" v-model="form.resetDate" align="right" :value-format="'yyyy-MM-dd'" placeholder="选择调整日期"
                :disabled="this.disabled "
                :picker-options="{
                  disabledDate: (time) =>
                    time.getTime() <
                    new Date(new Date().setHours(0, 0, 0, 0))
                }">
              </el-date-picker>

效果图:

2、el-time-picker设置指定时间之前的时间不可选

<el-col :span="12">
            <el-form-item label="开始时间" prop="enterTime">
              <el-time-picker v-model="form.enterTime" :disabled="this.disabled" :value-format="'HH:mm'" format="HH:mm" style="width: 100%" placeholder="请选择开始时间"
              :picker-options="{selectableRange:`00:00:00-${form.stopTime ? form.stopTime + ':00' : '23:59:59'}`}">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-time-picker v-model="form.stopTime" :disabled="this.disabled" :value-format="'HH:mm'" format="HH:mm" style="width: 100%" placeholder="请选择结束时间"
              :picker-options="{selectableRange:`${form.enterTime ? form.enterTime + ':00' : '00:00:00'}-23:59:59`}">
              </el-time-picker>
            </el-form-item>
          </el-col>

效果图:

 3、设置YYYY-MM-dd HH:mm:ss格式指定时间之前不可选

<el-col :span="12">
            <el-form-item label="停机时间" prop="enterTime">
              <el-date-picker v-model="form.enterTime" type="datetime" :disabled="this.disabled" placeholder="请选择进车时间" align="right" :value-format="'yyyy-MM-dd HH:mm'"
                style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-date-picker v-model="form.stopTime" type="datetime" :disabled="this.disabled" placeholder="请选择结束时间" align="right" :value-format="'yyyy-MM-dd HH:mm'"
                style="width: 100%" :picker-options="pickerOptions" @change="pickerOptionsEnd(form.enterTime,form.stopTime)">
              </el-date-picker>
            </el-form-item>
          </el-col>
// 结束时间不能小于开始时间
        pickerOptionsEnd(start,end){
          console.log(start)
          console.log(end)
          if(Date.parse(end )<= Date.parse(start) ) {
            this.form.stopTime = ''
            this.$modal.msgError("结束时间不能小于停机时间");
          }
        },

效果图:

 4、element 日期时间组件,限制日期时间选择范围,不能选择早于当前的时间

vue代码

<el-col :span="12">
            <el-form-item label="开始时间" prop="enterTime">
              <el-date-picker v-model="form.enterTime" type="datetime" :disabled="this.disabled" placeholder="请选择开始时间" align="right" :value-format="'yyyy-MM-dd HH:mm:ss'"
                style="width: 100%" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="stopTime">
              <el-date-picker v-model="form.stopTime" type="datetime" :disabled="this.disabled" placeholder="请选择结束时间" align="right" :value-format="'yyyy-MM-dd HH:mm:ss'"
                style="width: 100%" :picker-options="pickerEndOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>

js代码 

data() {
      return {
// 表单参数
        form: {
          stopTime:"",
        },
// 日期限制
        pickerEndOptions: {
          disabledDate: (time) => {
            if (this.form.enterTime) {
              const st = this.form.enterTime.split(' ')[1];
              let dateTime = new Date(this.form.enterTime);
              let startDateTime = dateTime.setDate(dateTime.getDate() - (st=='00:00:00'? 0: 1));
              return (
                time.getTime() < new Date(startDateTime).getTime()
              );
            }
          },
          // 限制时间
          selectableRange: []
          
        },
}
}

监听 

watch: {
      'form.stopTime':{
        handler(newValue, oldValue) {
          if(this.form.enterTime.split(" ")[0] === newValue.split(" ")[0]){
            const st = this.form.enterTime.split(' ')[1] + ":00";
            console.log(st)
            this.pickerEndOptions.selectableRange = [`${st} - 23:59:59`];
          }else{
            this.pickerEndOptions.selectableRange = [`00:00:00 - 23:59:59`];
          }
        }
      }
    },

效果图


http://www.kler.cn/news/136176.html

相关文章:

  • python构建flask服务用于视频文件的处理后返回
  • uniapp通过id获取dom的宽度,高度,位置等(应该是 任意平台都通用 )
  • Redis多级缓存
  • Linux系统安装Redis详细操作步骤(二进制发布包安装方式)
  • python实战(一)——iris鸢尾花数据集分类
  • 使用 docker 的方式部署 NFS server 提供文件共享能力
  • k8s上Pod生命周期、重启策略、容器探测简介
  • 认识前端包常用包管理工具(npm、cnpm、pnpm、nvm、yarn)
  • 苹果CMS首涂第30套可装修DIY主题模板免授权版
  • Spring IOC - Bean的生命周期之依赖注入
  • 【论文阅读笔记】Deep learning for time series classification: a review
  • 数理统计的基本概念(二)
  • 奇富科技发布鸿蒙元服务1.0版本,打造鸿蒙生态金融科技全新体验
  • 【总结】坐标变换和过渡矩阵(易忘记)
  • AI绘画使用Stable Diffusion(SDXL)绘制三星堆风格的图片
  • LLM模型-讯飞星火与百度文心api调用
  • 竞赛 题目:基于深度学习的人脸表情识别 - 卷积神经网络 竞赛项目 代码
  • C++:拷贝构造函数,深拷贝,浅拷贝
  • 第十七篇-Awesome ChatGPT Prompts-备份-百度翻译
  • Android 电量优化概览
  • redis非关系型数据库(缓存型数据库)——中间件
  • vue3父组件提交校验多个子组件
  • Excel自定义函数提取超链接
  • qt treeview 删除节点
  • Python数据结构——Tuple
  • 壹基金宣传进瑞金河背街社区 安全家园项目防灾减灾深入人心