el-date-picker日期時間選擇器的選擇時間限制到分鐘級別

更新時間：2025年01月13日 10:11:05 作者：前端程序員_花姐夫Jun

文章介紹了如何使用el-date-picker 組件來限制用戶選擇的時間,禁止選擇當前時間的日期及時分,同時允許選擇其他日期的全天時分,通過設置 `pickerOptions` 對象的屬性,可以實現(xiàn)對日期和時間的精確控制,感興趣的朋友跟隨小編一起看看吧

一、代碼展示

<template>
  <el-date-picker
    v-model="date"
    type="datetime"
    format="YYYY-MM-DD HH:mm"
    time-format="HH:mm"
    v-bind="pickerOptions"
    placeholder="選擇日期時間">
  </el-date-picker>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
const date = ref('')
/**
 * 生成一個數(shù)組
 * @param start
 * @param end
 */
const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
/**
 * 限制今天之前的時間不能選擇（小時）
 */
const disabledHours = () => {
  let newVal = new Date(date.value)
  if (newVal && newVal.getFullYear() == new Date().getFullYear() &&
    newVal.getMonth() == new Date().getMonth() &&
    newVal.getDate() == new Date().getDate()
  ) {
    //如果為今天，則限制當前時間前的時間不能選擇。
    return makeRange(0, new Date().getHours() - 1)
  }
}
/**
 * 限制今天之前的時間不能選擇（分鐘）
 * @param hour
 */
const disabledMinutes = (hour: number) => {
  let newVal = new Date(date.value)
  if (newVal && newVal.getFullYear() == new Date().getYear() &&
    newVal.getMonth() == new Date().getMonth() &&
    newVal.getDate() == new Date().getDate()
  ) {
    //如果為今天，則限制當前時間前的時間不能選擇。
    return makeRange(0, new Date().getMinutes() - 1)
  }
}
/**
 * 限制今天之前的時間不能選擇的配置
 */
const pickerOptions = computed(() => {
  return {
    // 限制今天之前的日期不能選擇
    disabledDate(time: any) {
      return time.getTime() < Date.now() - 8.64e7
    },
    // 限制今天之前的小時不能選擇
    disabledHours,
    // 限制今天之前的分鐘不能選擇
    disabledMinutes
  }
})
</script>

二、代碼解釋模板部分 (<template>)

- 使用 el-date-picker 組件：

- v-model="date": 將用戶選擇的日期和時間綁定到 date 變量。

- type="datetime": 表明此日期選擇器可以同時選擇日期和時間。

- format="YYYY-MM-DD HH:mm": 定義日期和時間的顯示格式。

- time-format="HH:mm": 單獨定義時間部分的顯示格式。

- v-bind="pickerOptions": 將 pickerOptions 對象的屬性綁定到 el-date-picker 組件上，以實現(xiàn)對日期和時間選擇的限制。

腳本部分 (<script>)

1. 導入和響應式數(shù)據(jù)聲明

- import { ref, computed } from 'vue': 從 Vue 3 的 vue 包中導入 ref 和 computed 函數(shù)。

- const date = ref(''): 創(chuàng)建一個響應式的 date 變量，用于存儲用戶選擇的日期和時間。初始值為空字符串。

2. makeRange 函數(shù)

const makeRange = (start: number, end: number) => {
  const result: number[] = [];
  for (let i = start; i <= end; i++) {
    result.push(i);
  }
  return result;
}

此函數(shù)接收兩個數(shù)字參數(shù) start 和 end。
創(chuàng)建一個空數(shù)組 result。
通過 for 循環(huán)將從 start 到 end 的數(shù)字添加到 result 數(shù)組中。

3. disabledHours 函數(shù)

const disabledHours = () => {
  let newVal = new Date(date.value);
  if (newVal && newVal.getFullYear() == new Date().getFullYear() &&
    newVal.getMonth() == new Date().getMonth() &&
    newVal.getDate() == new Date().getDate()
  ) {
    return makeRange(0, new Date().getHours() - 1);
  }
}

創(chuàng)建一個 newVal 對象，通過 date.value 來初始化。
檢查 newVal 是否為今天的日期。
如果是今天，使用 makeRange 函數(shù)生成一個數(shù)組，包含從 0 到當前小時減 1 的小時數(shù)，表示這些小時不可選。

4.disabledMinutes 函數(shù)

const disabledMinutes = (hour: number) => {
  let newVal = new Date(date.value);
  if (newVal && newVal.getFullYear() == new Date().getYear() &&
    newVal.getMonth() == new Date().getMonth() &&
    newVal.getDate() == new Date().getDate()
  ) {
    return makeRange(0, new Date().getMinutes() - 1);
  }
}

與 disabledHours 函數(shù)類似，但是它接收一個 hour 參數(shù)（此處似乎未使用）。
檢查是否為今天，如果是，則使用 makeRange 函數(shù)生成一個數(shù)組，包含從 0 到當前分鐘減 1 的分鐘數(shù)，表示這些分鐘不可選。

5. pickerOptions 計算屬性

const pickerOptions = computed(() => {
  return {
    // 限制今天之前的日期不能選擇
    disabledDate(time: any) {
      return time.getTime() < Date.now() - 8.64e7;
    },
    // 限制今天之前的小時不能選擇
    disabledHours,
    // 限制今天之前的分鐘不能選擇
    disabledMinutes
  };
});

computed(() => {...}): 這是一個計算屬性，返回一個對象，包含對日期選擇器的配置選項。
disabledDate(time: any) {...}: 接收一個 time 對象，將其轉(zhuǎn)換為時間戳，如果小于當前時間戳減去一天的毫秒數(shù)（8.64e7 毫秒是一天），則該日期不可選。
disabledHours: 引用 disabledHours 函數(shù)，用于限制某些小時不可選。
disabledMinutes: 引用 disabledMinutes 函數(shù)，用于限制某些分鐘不可選。