快捷導(dǎo)航

el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級(jí)別

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

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

一、代碼展示

<template>
  <el-date-picker
    v-model="date"
    type="datetime"
    format="YYYY-MM-DD HH:mm"
    time-format="HH:mm"
    v-bind="pickerOptions"
    placeholder="選擇日期時(shí)間">
  </el-date-picker>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue'
const date = ref('')
/**
 * 生成一個(gè)數(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
}
/**
 * 限制今天之前的時(shí)間不能選擇（小時(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()
  ) {
    //如果為今天，則限制當(dāng)前時(shí)間前的時(shí)間不能選擇。
    return makeRange(0, new Date().getHours() - 1)
  }
}
/**
 * 限制今天之前的時(shí)間不能選擇（分鐘）
 * @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()
  ) {
    //如果為今天，則限制當(dāng)前時(shí)間前的時(shí)間不能選擇。
    return makeRange(0, new Date().getMinutes() - 1)
  }
}
/**
 * 限制今天之前的時(shí)間不能選擇的配置
 */
const pickerOptions = computed(() => {
  return {
    // 限制今天之前的日期不能選擇
    disabledDate(time: any) {
      return time.getTime() < Date.now() - 8.64e7
    },
    // 限制今天之前的小時(shí)不能選擇
    disabledHours,
    // 限制今天之前的分鐘不能選擇
    disabledMinutes
  }
})
</script>

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

- 使用 el-date-picker 組件：

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

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

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

- time-format="HH:mm": 單獨(dú)定義時(shí)間部分的顯示格式。

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

腳本部分 (<script>)

1. 導(dǎo)入和響應(yīng)式數(shù)據(jù)聲明

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

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

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ù)接收兩個(gè)數(shù)字參數(shù) start 和 end。
創(chuàng)建一個(gè)空數(shù)組 result。
通過(guò) 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)建一個(gè) newVal 對(duì)象，通過(guò) date.value 來(lái)初始化。
檢查 newVal 是否為今天的日期。
如果是今天，使用 makeRange 函數(shù)生成一個(gè)數(shù)組，包含從 0 到當(dāng)前小時(shí)減 1 的小時(shí)數(shù)，表示這些小時(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ù)類(lèi)似，但是它接收一個(gè) hour 參數(shù)（此處似乎未使用）。
檢查是否為今天，如果是，則使用 makeRange 函數(shù)生成一個(gè)數(shù)組，包含從 0 到當(dāng)前分鐘減 1 的分鐘數(shù)，表示這些分鐘不可選。

5. pickerOptions 計(jì)算屬性

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

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

三、效果展示

到此這篇關(guān)于el-date-picker日期時(shí)間選擇器的選擇時(shí)間限制到分鐘級(jí)別的文章就介紹到這了,更多相關(guān)el-date-picker選擇時(shí)間到分內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: