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>