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>

总结

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

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

相关推荐
夫琅禾费米线22 分钟前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
小镇程序员5 小时前
vue2 src自定义事件
前端·javascript·vue.js
AlgorithmAce8 小时前
Live2D嵌入前端页面
前端
nameofworld8 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter8 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
GISer_Jing8 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育8 小时前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
GISer_Jing9 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x9 小时前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
weixin_4314496810 小时前
web组态软件
前端·物联网·低代码·编辑器·组态