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

目录


前言

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

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


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

一、最近30天

html 复制代码
<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>

总结

提示:这里对文章进行总结:

这里只收集我目前为止在项目的过程中遇到的问题

相关推荐
非凡ghost11 分钟前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns1 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年1 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴1 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心1 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart1 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao2 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang
Yeats_Liao2 小时前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang
蒜香拿铁2 小时前
Angular【http服务端交互】
前端·http·angular.js
游戏开发爱好者82 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview