Element-UI日期时间选择器：巧解12小时后时间选中限制

前端

2024-02-22 07:43:55

如何突破 Element-UI 日期时间选择器的 12 小时限制

挑战：无法选择超过 12 小时的事件

Element-UI 的日期时间选择器默认限制时间选择范围在 12 小时以内。这在某些场景下非常不便，比如需要安排一个持续超过 12 小时的活动。

原因：第三方库限制

造成这一限制的原因在于 Element-UI 使用的第三方库“time-picker-spinner”默认限制时间选择范围在 12 小时以内。为了优化性能，该库仅渲染 12 小时内的所有时间选项，而渲染 24 小时选项会占用更多资源。

解决方案：解除限制

要解决这一问题，有两种方法：

1. 修改 Element-UI 源代码

修改源代码以移除 12 小时限制：

// 找到 time-picker-spinner.js 中的代码
if (endTime <= startTime) {
  endTime = (new Date(startTime)).setHours(startTime.getHours() + 12);
}

// 修改为：

endTime = (new Date(startTime)).setHours(startTime.getHours() + 24);

2. 使用第三方库

使用第三方库实现 12 小时以上时间的选择，例如“vue-time-picker”库：

// 安装 vue-time-picker
npm install vue-time-picker

// 在 Vue 组件中引入该库
import VueTimepicker from 'vue-time-picker'
Vue.component('vue-time-picker', VueTimepicker)

示例代码

以下是使用修改后的 Element-UI 源代码解决限制的示例代码：

// 修改源代码
import Vue from 'vue'
import ElementUI from 'element-ui'

Vue.use(ElementUI)

const app = new Vue({
  el: '#app',
  data: {
    time: '00:00'
  }
})

以下是使用“vue-time-picker”库实现 12 小时以上时间选择的示例代码：

// 使用第三方库
import Vue from 'vue'
import VueTimepicker from 'vue-time-picker'

Vue.component('vue-time-picker', VueTimepicker)

const app = new Vue({
  el: '#app',
  data: {
    time: '00:00'
  }
})