首页 > 其他分享 >ElementUI-DateTimePicker时间限制+清空

ElementUI-DateTimePicker时间限制+清空

时间:2023-09-07 10:15:13浏览次数:83  
标签:startDate 00 ElementUI getTime time 日期 清空 DateTimePicker queryParams

1需求

有两个时间控件,开始时间不能大于结束时间

<el-col :span="8">
                  <el-date-picker
                    v-model="queryParams.startDate"
                    size="small"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择开始时间"
                    :picker-options="pickerOptionsStart"
                    clearable
                    @change="handle('start')"
                  />
                </el-col>
                <el-col :span="8" :offset="1">
                  <el-date-picker
                    v-model="queryParams.endDate"
                    size="small"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择结束时间"
                    :picker-options="pickerOptionsEnd"
                    clearable
                    @change="handle('end')"
                  />
                </el-col>

js

pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.queryParams.endDate) {
            return (
              time.getTime() > new Date(this.queryParams.endDate).getTime()
            );
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.queryParams.startDate) {
            return (
              //小于开始日期的都禁止,只能选大于等于开始日期的
              time.getTime() < new Date(this.queryParams.startDate).getTime()
            );
          }
        },
      },

问题

假如开始时间选择2023-09-07 00:00:00,结束时间可以选择7号。
如果开始时间选择2023-09-07 00:00:01(7号但大于00:00:00的时间),结束时间不可以选择7号。

原因

控件会取每个日期的00:00:00作为判断条件。
所以2023-09-07 00:00:01(大于00:00:00)会作为2023-09-08 00:00:00处理。所以8号前的日期都被禁用。也就不能选择7号了。
而2023-09-07 00:00:00会作为2023-09-07 00:00:00处理.所以7号前的日期都被禁用(能选择7号)。

解决方法:

判断选择日期小于(开始日期-一天少一毫秒)(不能减一天,因为开始日期选择00:00:00时,结束日期就会多一天)
或者判断:判断选择日期小于等于(开始日期-一天)

pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.queryParams.startDate) {
            return (
              //小于开始日期-一天(少1毫秒,也可以用8.64e6表示,一天的毫秒数是8.64e7)的都禁止,只能选大于等于开始日期的
              time.getTime() < new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000 - 1)
              //time.getTime() < new Date(this.queryParams.startDate).getTime() - 8.64e6
              //time.getTime() <= new Date(this.queryParams.startDate).getTime() - (24 * 3600 * 1000)
              //time.getTime() <= new Date(this.queryParams.startDate).getTime() - 8.64e7
            );
          }
        },
      },

2问题

点击x,清空datatimepicker控件。发现日期选择不了。
解决方法:
用watch监听选择器的值,清空选择器值变为null,选择器识别不了,需要改为""

watch: {
    queryParams.startDate: function () {
      if (this.queryParams.startDate === null) {
        this.queryParams.startDate = "";
      }
    },
  },

标签:startDate,00,ElementUI,getTime,time,日期,清空,DateTimePicker,queryParams
From: https://www.cnblogs.com/tangtang-benben/p/17684005.html

相关文章

  • python-pycharm打印 不换行,清空
    一、参考代码foriinrange(100):time.sleep(0.4)#print(i)print('\r','count:'+str(i),end='---')#这种方式可以避免输出内容刷屏......
  • xlwings 清空工作表 删除工作表
    清空工作表删除工作表用于工作表重复时使用要使用xlwings清空某个工作表,您可以使用`clear()`方法。以下是一个示例代码,演示如何清空指定工作表的内容:```pythonimportxlwingsasxw#打开Excel应用程序和工作簿app=xw.App(visible=True,add_book=False)wb=app.b......
  • elementui el-select设置默认值且默认值不允许删除
    参考网址:【记录】el-select已选项禁止删除el-select编辑时已选择的项不允许删除、element-ui里面的下拉多选框el-select时,默认值不可删除在项目中el-select设置默认值且默认值不允许删除和取消选中通过vue全局指令实现该要求exportdefault{ update(el,bindings){ ......
  • elementui 长表单验证滚动到首个错误位置
    this.$refs['form'].validate(valid=>{if(valid){//验证通过}else{//验证失败this.$nextTick(()=>{letisError=document.getElementsByClassName('is-error') isError[0].......
  • 清空缓冲区输入/输出方法
    清空输出stdout缓冲区在C和C++中,你可以使用fflush函数来清空输出缓冲区。以下是一个示例#include<stdio.h>intmain(){printf("这是一行文本\n");fflush(stdout);//清空标准输出缓冲区//后续的输出将会立即显示在屏幕上printf("这一行将会......
  • ElementUI 全局设置组件的默认属性
    importElementUIfrom'element-ui'Element.Input.props.clearable.default=true;JS复制全屏原生属性通常情况下,以maxlength属性为例importElementUIfrom'element-ui'constrender=ElementUI.Input.render;ElementUI.Input.render=function(){......
  • Vue【原创】基于elementui的分组多选下拉框【group-list】
    效果图: 如图分为多选模式和单选模式。 group-select:1<template>2<div>3<el-select4v-model="innerValue"5:placeholder="placeholder"6@change="changeSelect"......
  • elementUI使用el-uplaod上传多个图片并删除部分图片
    前端界面:<el-form-itemlabel="商品轮播图":rules="[{required:true,message:'必须要上传图片',trigger:'blur'}]"prop="images"><el-uploadref=&q......
  • VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)
    准备工作:安装 yarninstall vue-quill-editormain.js//编辑器importVueQuillEditorfrom'vue-quill-editor'//引入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'......
  • 有关elementuiplus popper 动画报错
     解决方法:局部解决:    ElementPlus的 ElDropdown 组件是基于Popper.js构建的,所以可以使用相同的方式来禁用 adaptive 选项。在 ElDropdown 组件中,你可以使用 popper-options 属性来指定Popper实例的选项。因此,要禁用 adaptive 选项,你可以将 popper-op......