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>
相关推荐
Dnn011 天前
修改el-select背景颜色
css·elementui·vue3
sen_shan5 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙6 天前
vue3+vite 多个环境配置
前端·vue3·vite
緑水長流*z6 天前
(03)Vue的常用指令
前端·vue.js·vue3·vue2·vue框架·vue学习笔记·vue学习教程
Edward-tan9 天前
【玩转全栈】—— Django+vue3+讯飞星火API 实现前端页面实时AI答复
vue3·全栈·django5
sen_shan15 天前
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单
vue.js·typescript·vue3·element·element plus·动态菜单·多用户动态加载菜单
Samdy_Chan16 天前
同时支持Vue2/Vue3的图片懒加载组件(支持懒加载 v-html 指令梆定的 html 内容)
前端·vue·vue3·vue2·懒加载·图片懒加载·图像懒加载
意桉16 天前
Element Plus 去掉表格外边框
前端·vue.js·elementui·element plus
USER_A00116 天前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
sen_shan21 天前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单