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>
相关推荐
sen_shan17 小时前
Vue3+Vite+TypeScript+Element Plus开发-02.Element Plus安装与配置
前端·javascript·typescript·vue3·element·element plus
路光.1 天前
Vue3实现锚点定位
前端·javascript·vue.js·vue3
奔跑吧邓邓子4 天前
【商城实战(92)】高并发下的商城缓存进阶:从原理到实战
redis·缓存·springboot·uniapp·element plus·商城实战
wocwin5 天前
uniapp微信小程序封装navbar组件
微信小程序·uni-app·vue3·组件封装·navbar
奔跑吧邓邓子5 天前
【商城实战(74)】数据采集与整理,夯实电商运营基石
springboot·uniapp·element plus·商城实战·商城数据采集与整理
留白声7 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维10 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
Jiaberrr14 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
努力做大神16 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
weixin_4222013016 天前
element ui设置结束时间为23:59:59
时间选择器·el-data-picker·element ui·结束时间