element-plus的日期选择器限定选择范围

这篇具有很好参考价值的文章主要介绍了element-plus的日期选择器限定选择范围。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

提示:这里可以添加本文要记录的大概内容:

element-plus的日期选择器限定选择范围,由于数据的获取范围限定,需要前端处理一下日期的选择范围


提示:以下是本篇文章正文内容,下面案例可供参考

一、最近30天

element-plus的日期选择器限定选择范围,Vue,Element Plus,前端,Element Plus

<template>
  <div class="demo-date-picker">
    <div class="block">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
        :disabled-date="disabledDateFun"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')

const disabledDateFun = (time:Date) => {
  if (time.getTime() > new Date().getTime()) {
    return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
  } else {
    return time.getTime() < Date.now() - 30 * 8.64e7; //8.64e7就是一天的时间戳 24*60*60*1000 
  }
}

</script>

总结

提示:这里对文章进行总结:
这里只收集我目前为止在项目的过程中遇到的问题文章来源地址https://www.toymoban.com/news/detail-638864.html

到了这里,关于element-plus的日期选择器限定选择范围的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element-ui年份范围选择器,年日期插件,可选日期区间等

    可以禁止选择未来日期,以及可选的日期范围控制,代码在最下面。 直接上代码: 先来一个不禁止选择的示例 yearDate.js文件 我是禁止了未来日期,时间跨度,只能选3年, 代码如下: 参考地址:https://www.jianshu.com/p/44584a4a4953

    2024年02月11日
    浏览(52)
  • element UI日期选择器固定选择范围

    项目中经常会使用到日期选择器,并且会对可选择的日期有要求,分享几个常用的,给大家作参考。 只能选择当前日期前(不包含当前日期)  只能选择当前日期前(包含当前日期) 指定日期范围(例如2022年12月1日至当前日期)

    2024年02月07日
    浏览(34)
  • element-ui 时间日期选择器限制选择范围

    组件代码 场景1:设置选择今天及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择三个月之内到今天的日期 情景4: 设置选择最大范围为30天

    2024年02月12日
    浏览(37)
  • Element UI DatePicker 日期范围选择动态设置禁选日期

    今天在工作时,后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后,只能选择 13 号前一周和后一周的日期,其他日期处于禁止选择状态。 先去看了下 element 的相关文档,找到了一个 当前时间日期选择器特有的选项picker-options, 传送门

    2024年02月12日
    浏览(37)
  • element-plus的周选择器 一周从周一开始

    1、代码 1)、template中 2)、方法中  2、细节  (1)value-format=\\\"YYYY-MM-DD\\\"           这样写change事件中得到的值就是2020-12-10          想要年月日时分秒 就写成【value-format=\\\"YYYY-MM-DD hh:mm:ss\\\"】

    2024年02月10日
    浏览(51)
  • element-ui 日期选择器选择年份,拼接月日,并控制范围

    element-ui 日期选择器选择年份,拼接月日,并控制范围。 type=\\\"year\\\",控制下拉选项为年份 format=\\\"yyyy-MM-dd\\\"、value-format=\\\"yyyy-MM-dd\\\",控制文字显示为年月日 此时选中年份会显示选中年的第一天【2023-01-01】,如果有规定月-日的需求,可以在选中事件里重新赋值。 :picker-options=\\\"pick

    2024年02月08日
    浏览(57)
  • element ui datePick时间日期一段时间,限制选择日期的范围

     时间戳,一天 想限制只能选日期间隔为一年,联合选择器样式不好改,使用俩单独的 有两个办法限制 1.一个在外层使用form通过表单验证控制,出现错误提示(由于是两个单独的组件,触发验证的方式又为单个失去焦点,所以俩组件无法实时更新) 2.用datepick自带的属性di

    2024年02月05日
    浏览(45)
  • Element-Plus select选择器-下拉组件错位bug(有高度滚动时)

    由于项目不便展示,因此在官网复现bug https://element-plus.org/zh-CN/component/select.html#基础用法 源码调试时发现下拉菜单是直接放在body 元素里,这时候希望它不要直接放在body里, 查阅文档看到这两个属性: 但是添加了上面的属性后,出现了新的问题,要么是不生效,要么是下拉

    2024年02月12日
    浏览(36)
  • vue3使用element-plus

    element-ui 是配合 vue2 使用,element-plus 是配置 vue3 使用的 1. 包管理器的方式 如果是使用 webpack 或者 vite 打包工具新建的项目 2. 浏览器直接导入 直接通过浏览器的 HTML 标签导入 Element Plus,然后就可以使用全局变量 ElementPlus 1. 导入全部组件且注册所有的图标 声明使用 ElementPl

    2024年02月08日
    浏览(80)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包