vue3 el-date-picker使用gettime不能选择当天
时间: 2025-05-08 21:03:02 浏览: 30
### Vue3 Element Plus `el-date-picker` 使用 `getTime` 方法导致无法选择当天的解决方案
在 Vue3 中使用 Element Plus 的 `el-date-picker` 组件时,如果希望允许用户选择当天日期,则需要注意如何配置 `disabledDate` 函数。当使用 JavaScript 的 `getTime()` 方法比较时间戳时,可能会遇到不允许选择当天的情况。
为了确保可以正常选择当天,在定义 `disabledDate` 函数时应调整逻辑判断条件[^1]:
```javascript
data() {
return {
searchForm: {
orderTime: ''
},
pickerOptions: {
disabledDate(time) {
const today = new Date();
today.setHours(0, 0, 0, 0); // 设置时间为今天的零点
return time.getTime() < today.getTime(); // 只禁用今天之前的日子
}
}
};
}
```
上述代码片段展示了如何修改 `disabledDate` 函数以仅禁用早于当前日期的选择项。具体来说,通过创建一个新的 `Date` 对象表示今日凌晨的时间,并将其作为基准来进行对比,从而实现了只阻止过去日期被选中的效果。
另外一种方法是在计算时间差值时考虑一天的具体毫秒数值(即86400000),这样也可以达到相同的目的[^3]:
```html
<template>
<div class="example">
<el-date-picker
v-model="date"
type="date"
placeholder="请选择日期"
:disabled-date="disabledDate"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const date = ref(null);
function disabledDate(time): boolean {
return time.getTime() < Date.now() - 8.64e7;
} // 这里减去了一天的毫秒数 (24 * 60 * 60 * 1000),使得可以选择当天
</script>
```
这两种方式都可以有效解决由于 `getTime` 方法引起的不能选择当天的问题。开发者可以根据实际需求选择合适的方法来实现预期功能。
阅读全文
相关推荐


















