首页 > 其他分享 >element-plus的type类型为daterange的时候限制时间选择

element-plus的type类型为daterange的时候限制时间选择

时间:2023-12-22 10:34:42浏览次数:37  
标签:picker const daterange element 选择 日期 plus type

对于 Element Plus 的日期时间范围选择组件(el-date-pickertype 设置为 "daterange"),你可以使用 :picker-options 属性来设置选项,通过 disabledDate 函数来禁止选择当前时间之前的日期。

下面是一个 el-date-pickertype"daterange")的示例,它禁止选择今天之前的日期:

<el-date-picker
  v-model="dateRange"
  :picker-options="pickerOptions"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>
 
import { ref } from 'vue'

export default {
  setup() {
    const dateRange = ref([])

    const pickerOptions = {
      disabledDate(time) {
        const today = new Date()
        return time.getTime() < today.setHours(0, 0, 0, 0) // 禁止选择今天之前的日期
      }
    }

    return {
      dateRange,
      pickerOptions
    }
  }
}

标签:picker,const,daterange,element,选择,日期,plus,type
From: https://www.cnblogs.com/czb1218/p/17920728.html

相关文章

  • MyBatis-Plus 可视化代码生成器
    MyBatis-Plus可视化代码生成器来啦,让你的开发效率大大提速!!来源:blog.csdn.net/yelangkingwuzuhu/article/details/128077533前言一、mybatis-plus-generator-ui是什么?二、mybatis-plus-generator-ui怎么用?1、mavenpom引入2、新建程序入口,以main函数的方式运行3、......
  • vue+element 上传文件及文件夹
    有需求需要做一个上传压缩包及文件夹的需求,记性不好,记录一下。HTML使用的element的upload和form表单,dropdown下拉菜单<div><el-col:span="24"><el-form-itemlabel="材料路径:"prop="fileName"><el-col:span="21&qu......
  • 基于vue3和elementplus实现的自定义table组件
    基于vue3和elementplus实现的自定义table组件,集成查询工具栏分页,可通过配置直接实现基础的列表页基于vue3和elementplus实现的自定义table组件,集成查询工具栏分页,可通过配置直接实现基础的列表页目录结构如下:类型声明:declaretypeDictType={value:string|boolean|n......
  • Binding 中 Elementname,Source,RelativeSource 三种绑定的方式
    在WPF应用的开发过程中Binding是一个非常重要的部分。在实际开发过程中Binding的不同种写法达到的效果相同但事实是存在很大区别的。这里将实际中碰到过的问题做下汇总记录和理解。1. source= {binding}和source={bindingRelativeSource={RelativeSourceself},Path=Dat......
  • element-ui中的el-table底部固定指定行
    1,固定一行合计的情况  https://element.eleme.cn/#/zh-CN/component/table 直接使用官方文档上的summary-method  2,固定指定行或者多行  使用样式去固定例子:(计算列表数据的平均值,最大值,最小值并固定底部)1,计算数据的值protectedcalcData(data:any){......
  • mybatisPlus注解fill = FieldFill.UPDATE和updateStrategy = FieldStrategy.IGNORED的
    由于当时使用mybatisPlus的updateById更新数据,习惯性的认为字段为null的不更新。但是上线后,出问题了。只更新状态字段,其他的一些属性竟然被置空了。赶紧排查,发现实体类中这些字段有fill=FieldFill.UPDATE,导致更新的时候如果这个字段为null也会更新为null。 同样作用的还有@T......
  • MybatisPlus
    Mybatis-Plus1.0简介MyBatis-Plus是一个MyBatis的增强工具,在MyBatis的基础上只做增强不做改变,为了简化开发、提升效率而生。MyBatis-Plus提供了通用的mapper和service,可以在不编写任何SQL语句的情况下,快速的实现对单表的CRUD、批量、逻辑删除、分页等操作官网:https://baomidou.......
  • MybatisPlus配置逻辑删除
    1、步骤1:配置逻辑删除的信息全局配置mybatis-plus:global-config:db-config:logic-delete-field:flag#全局逻辑删除的实体字段名(since3.3.0,配置后可以忽略不配置步骤2)logic-delete-value:1#逻辑已删除值(默认为1)logic-not-delete......
  • 好家伙,这个开源项目硬生生复制了一个 ChatGPT Plus 出来
    最近有一款聊天机器人框架LobeChat火出了天际,它不仅支持多模态,支持语音会话,还有一个强大的FunctionCalling插件生态系统(可以作为ChatGPT插件的平替)。最重要的是,它的UI很漂亮,一看就是小姐姐精心设计过的~连Vercel的CEO都给它点赞了:项目地址:https://github.com/lob......
  • 解决MyBatis-Plus 更新字段为null 不生效
    1.异常说明:mapper.updateById()时,set为null未生效,其他字段更新periodRecordOriginal.setSettleTime(null);periodRecordOriginal.setActualSettleTime(null);periodRecordOriginal.setSettleStatus(0);i......