Vue el-data-picker选中开始时间,结束时间自动加半小时

效果

思路

查阅elemnet plus官网,日期时间选择器type="datetimerange"这个选中开始时间并没有对应事件会被触发, 因此思路更换成**type="datetime"**的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。

代码

日期时间选择器

javascript 复制代码
<template>
  <div class="dataStyle">
    <el-date-picker v-model="startTime" type="datetime" class="startStyle" placeholder="请选择开始时间"
      :disabled-date="disabledFutureDate" />
    -
    <el-date-picker v-model="endTime" type="datetime" class="endStyle" placeholder="请选择结束时间"
      :disabled-date="disabledEndDate" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义开始时间和结束时间
const startTime = ref('');
const endTime = ref('');

// 禁用未来日期
const disabledFutureDate = (time) => {
  const now = new Date();
  // 禁用当天 23:59:59 之后的时间
  const endOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  return time.getTime() > endOfToday.getTime();
};

// 自动设置结束时间为开始时间的 30 分钟后
watch(startTime, (newStartTime) => {
  if (newStartTime) {
    const start = new Date(newStartTime); // 将开始时间转换为日期对象
    const newEndTime = new Date(start.getTime() + 30 * 60 * 1000); // 增加30分钟
    endTime.value = newEndTime; // 设置结束时间
  }
});
//允许结束时间只能大于或等于开始时间
const disabledEndDate = (time) => {
  if (!startTime.value) return disabledFutureDate(time);
  const start = new Date(startTime.value);
  return time.getTime() < start.getTime() || disabledFutureDate(time);
};
</script>
<style lang="scss">
.startStyle,
.endStyle {
  .el-input__wrapper {
    border-radius: 0;
    box-shadow: none
  }
}
</style>

<style lang="scss" scoped>
.dataStyle {
  background-color: #fff;
  width: 24rem;
  display: flex;

  .startStyle .endStyle {
    width: 12rem;
  }
}
</style>

日期选择器

复制代码
<template>
  <div class="parentStyle">
    <el-date-picker class="leftStyle" popper-class="leftPopper" v-model="form.startTime" type="date"
      :disabled-date="disabledDateStart" placeholder="选择开始日期" />
    -
    <el-date-picker class="rightStyle" popper-class="rightPopper" v-model="form.endTime" type="date"
      :disabled-date="disabledDate" placeholder="选择结束日期" />
  </div>

</template>

<script setup>
import dayjs from "dayjs";
import { reactive, watch } from "vue";
const form = reactive({
  startTime: "",
  endTime: ""
});
watch(() => form.startTime, (newValue, oldValue) => {
  if (newValue) {
    const start = dayjs(newValue)
    form.endTime = new Date(start.add(1, 'day').toISOString()) // 使用 ISO 8601 格式
    console.log(form);
  }
})
const disabledDateStart = (time) => {
  return time.getTime() > Date.now();
}
const disabledDate = (time) => {
  if (!form.startTime) {
    return false; // 若未选择开始时间,不禁用任何日期
  }
  return time.getTime() < form.startTime;
}

</script>
<style lang="scss">
.leftStyle,
.rightStyle {
  .el-input__wrapper {
    border-radius: 0;
    box-shadow: none
  }
}

.leftPopper {}

.rightStyle {}
</style>

<style lang="scss" scoped>
.parentStyle {
  background-color: #fff;
  width: 20rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5rem;

  .leftStyle,
  .rightStyle {
    width: 9rem;
  }
}
</style>
相关推荐
叫我阿柒啊6 小时前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊14 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊15 小时前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊1 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
PBitW1 天前
element plus 使用细节 (二)
前端·vue·element plus·element使用细节
叫我阿柒啊1 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare2 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊2 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊2 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发
叫我阿柒啊4 天前
从Java全栈到前端框架:一场真实面试的深度技术探索
java·redis·微服务·typescript·vue3·springboot·jwt