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>
相关推荐
Wiktok2 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok2 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok3 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手4 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok4 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss5 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
知识分享小能手5 天前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
哆啦A梦15885 天前
uniapp分包实现
前端·vue.js·uni-app·vue3
叫我阿柒啊6 天前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot
朝阳396 天前
vue3图标终极方案【npm包推荐】vue3-icon-sui(含源码详解)
npm·vue3·图标组件