首页vue3 el-date-picker使用gettime不能选择当天

vue3 el-date-picker使用gettime不能选择当天

时间: 2025-05-08 15:03:02 浏览: 33

### 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` 方法引起的不能选择当天的问题。开发者可以根据实际需求选择合适的方法来实现预期功能。

阅读全文