vue中el-date-picker選擇日期的限制的項目實踐

更新時間：2023年10月08日 11:35:14 作者：Jay丶蕭邦

ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下

前言：

element-ui作為vue的龍頭ui組件庫，深受前端開發(fā)者的喜愛。

本文著重記錄如何使用el-date-picker日期選擇器，怎么去限制選擇日期。先上官網(wǎng)鏈接---el-date-picker

基本使用：

先看下方代碼

<template>
    <div class="content">
        <el-date-picker v-model="value" type="date" placeholder="選擇日期">
        </el-date-picker>
    </div>
</template>
<script>
export default {
    data() {
        return {
            value: ''
        };
    }
};
</script>

這是一個最基本的使用方式，長這個樣子。

下面先提一個需求，要求不能選擇當前日期之前的日期，怎么辦？看picker-options屬性，我們需要在disabledDate上做文章！

<el-date-picker v-model="value" type="date" placeholder="選擇日期" :picker-options="pickerOptions"></el-date-picker>
data() {
        return {
            value: '',
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            }
        };
   },

注意：返回的是布爾值，當為true的時候意思就是禁用，拿時間戳來進行比較，可以打印下time看下是什么，其實就是一個個的時間，取時間戳與當前時間進行比較，如果小于當前時間，那就意味著是之前的日期，為true，禁止選擇，反之則可以選擇

可以看到當鼠標放在灰色背景日期上時，是禁止點擊選擇的。

時間區(qū)間：

難度升級：日期只能選擇今后十天的日期，之前的日期和十天之后的日期都不能選擇；其實這個也比較簡單，首先我們要算出十天之后的日期的時間戳，這個很容易

const DAY = 10
const nowTimer = Date.now()
const lastTimer = nowTimer + DAY * 24 * 60 * 60 * 1000

而后我們依然在disabledDate中去進行比較！

pickerOptions: {
    disabledDate(time) {
        return time.getTime() < nowTimer || time.getTime() > lastTimer;
    },
}

看看效果：寫此文檔的日期是2023-03-31，我們只能選擇04-01至04-10的日期，沒啥毛病

公司業(yè)務：選擇一個日期區(qū)間，但是只能選擇本月

這里我把在公司寫的一個業(yè)務也放上來，需求是，選擇一個日期區(qū)間，要求只能在當前月選擇！

1.首先使用el-date-picker組件，設(shè)置type為daterange，這個不存在什么問題

 <el-date-picker v-model="value" type="daterange" start-placeholder="開始日期" end-placeholder="結(jié)束日期"></el-date-picker>

2.如何去限制選擇區(qū)間在本月

有了上面的一些經(jīng)驗之后，很明顯我只需要time.getTime()這個值小于月初的那天為true，大于月末的那天為true即可，那這樣有了思路就簡單了很多！

① 獲取當前月份

const date = new Date()
const year = date.getFullYear(); //獲取年份
let month = date.getMonth() + 1; //獲取月份

② 獲取當前月的第一天，都是從1號開始的，這個沒啥異議吧

const startDate = `${year}-${month}-01 00:00:00`

③ 獲取當前月的最后一天，這個有點問題，因為有的月30天，有的月31天，2月甚至是28天或者是29天，有的人可能會想著還需要判斷當前年是否為閏年或者平年，再以此在判斷當前月是多少天，這樣就復雜了，js date對象有更簡單的方式

const lastDay = new Date(year, month, 0).getDate(); //獲取當月最后一日
const endDate = `${year}-${month}-${lastDay} 23:59:59`

④ 把開始時間和結(jié)束事件整成時間戳，方便計較

new Date(startDate).getTime(), new Date(endDate).getTime()

⑤ 寫成一個方法，有返回結(jié)果，返回結(jié)果為一個數(shù)組，包含兩個元素，開始時間戳以及結(jié)束時間戳

    const getDateRange = () => {
      const date = new Date()
      const year = date.getFullYear(); //獲取年份
      let month = date.getMonth() + 1; //獲取月份
      const lastDay = new Date(year, month, 0).getDate(); //獲取當月最后一日
      month = month < 10 ? '0' + month : month;
      const startDate = `${year}-${month}-01 00:00:00`
      const endDate = `${year}-${month}-${lastDay} 23:59:59`
      return [new Date(startDate).getTime(), new Date(endDate).getTime()]
    }

pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

效果！可以看出這便是限制成功了！

day.js簡化版1

本人喜歡在項目中安裝day.js這個包，作為項目中有關(guān)時間處理的插件---day.js

我們使用此插件可以很輕易的得到我們想要的時間。

import dayjs from "dayjs"
const getDateRange = () => {
    const startTimer = dayjs().startOf('month').valueOf()
    const endTimer = dayjs().endOf('month').valueOf()
    return [startTimer, endTimer]
}
pickerOptions: {
    disabledDate(time) {
        const [startTimer, endTimer] = getDateRange()
        return time.getTime() < startTimer || time.getTime() > endTimer;
    },
}

day.js簡化版2

思路就是利用day.js中的isBetween插件進行日期區(qū)間的判斷

import dayjs from "dayjs"
const isBetween = require('dayjs/plugin/isBetween')
dayjs.extend(isBetween)
const getDateRange = () => {
    const startDate = dayjs().startOf('month').format("YYYY-MM-DD")
    const endDate = dayjs().endOf('month').format("YYYY-MM-DD")
    return [startDate, endDate]
}
disabledDate(time) {
     const [startDate, endDate] = getDateRange()
     const result = dayjs(time).isBetween(startDate, dayjs(endDate), 'day', '[]')
     return !result
},