vue3ElementPlus使两个日期联动控制(限制结束时间为开始时间的一个月)

vue3ElementPlus两个日期联动控制(限制结束时间为开始时间的一个月)

  • 代码展示
javascript 复制代码
<template>
  <div>
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择开始日期"
      @change="handleStartChange"
    ></el-date-picker>
    
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="选择结束日期"
      :disabled-date="disabledEndDate"
    ></el-date-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const startDate = ref(null)
const endDate = ref(null)

// 限制结束日期为开始日期加一个月
const disabledEndDate = (date) => {
  if (startDate.value) {
    const maxEndDate = new Date(startDate.value)
    maxEndDate.setMonth(maxEndDate.getMonth() + 1)
    return date < startDate.value || date > maxEndDate
  }
  return false // 开始日期未选择时,不限制结束日期
}

// 处理开始日期变化
const handleStartChange = (value) => {
  // 更新结束日期,确保在范围内
  if (endDate.value && (endDate.value < value || endDate.value > new Date(value).setMonth(new Date(value).getMonth() + 1))) {
    endDate.value = null
  }
}
</script>

代码说明

  • 开始日期选择器: 用户可以任意选择开始日期。
  • 结束日期选择器: 使用 disabled-date 属性,确保结束日期只能选择在开始日期之后,并且不超过一个月的限制。
  • 日期变化处理: 当开始日期变化时,检查当前结束日期是否在允许的范围内,如果不在则重置结束日期。

额外提示

确保在你的项目中已经安装并引入了 Element Plus 组件库,以使日期选择器正常工作。

相关推荐
qq_390161777 分钟前
防抖函数--应用场景及示例
前端·javascript
3345543235 分钟前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test37 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome