溧阳企业网站建设seo com

需求描述

  在使用 Element Plus 的 el-date-picker 组件进行日期范围选择时，如果你希望选择的日期范围截止时间为所选时间的23:59:59，你可以通过设置 type 属性为 daterange，并结合使用 value-format 属性来控制时间格式。使用 value-format 来格式化绑定值，并在用户选择日期后通过 JavaScript 代码来调整时间。

实现逻辑

1. 设置 value-format：首先，设置 value-format 为 'yyyy-MM-dd HH:mm:ss' 来确保绑定的值包含时间。
2. 监听选择事件：通过监听 change 事件，你可以在用户选择日期后修改时间部分。
3. 调整时间：在事件处理函数中，将截止时间的时间设置为23:59:59。

<script lang="ts" setup>
import { ref } from 'vue';
import { dayjs } from 'element-plus';const value1 = ref([])const handleDateChange = (dataValue: Date | [Date, Date]) => {if (dataValue) {const start = new Date(dataValue[0]);const end = new Date(dataValue[1]);start.setHours(0,0,0); // 设置开始时间为当天的00:00:00点end.setHours(23, 59, 59); // 设置结束时间为当天的23:59:59value1.value[0] = dayjs(start).format('YYYY-MM-DD HH:mm:ss ');value1.value[1] = dayjs(end).format('YYYY-MM-DD HH:mm:ss');}
}
</script><template><el-date-pickerv-model="value1"type="daterange"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="handleDateChange"/>
</template>