快捷導(dǎo)航

vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐

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

ElementUI的el-date-picker使用時(shí),有時(shí)候想要限制用戶(hù)選擇的時(shí)間范圍,本文就來(lái)介紹了vue中el-date-picker選擇日期的限制的項(xiàng)目實(shí)踐,感興趣的可以了解一下

前言：

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

本文著重記錄如何使用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>

這是一個(gè)最基本的使用方式，長(zhǎng)這個(gè)樣子。

下面先提一個(gè)需求，要求不能選擇當(dāng)前日期之前的日期，怎么辦？看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();
                },
            }
        };
   },

注意：返回的是布爾值，當(dāng)為true的時(shí)候意思就是禁用，拿時(shí)間戳來(lái)進(jìn)行比較，可以打印下time看下是什么，其實(shí)就是一個(gè)個(gè)的時(shí)間，取時(shí)間戳與當(dāng)前時(shí)間進(jìn)行比較，如果小于當(dāng)前時(shí)間，那就意味著是之前的日期，為true，禁止選擇，反之則可以選擇

可以看到當(dāng)鼠標(biāo)放在灰色背景日期上時(shí)，是禁止點(diǎn)擊選擇的。

時(shí)間區(qū)間：

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

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

而后我們依然在disabledDate中去進(jìn)行比較！

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

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

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

這里我把在公司寫(xiě)的一個(gè)業(yè)務(wù)也放上來(lái)，需求是，選擇一個(gè)日期區(qū)間，要求只能在當(dāng)前月選擇！

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

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

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

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

① 獲取當(dāng)前月份

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

② 獲取當(dāng)前月的第一天，都是從1號(hào)開(kāi)始的，這個(gè)沒(méi)啥異議吧

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

③ 獲取當(dāng)前月的最后一天，這個(gè)有點(diǎn)問(wèn)題，因?yàn)橛械脑?0天，有的月31天，2月甚至是28天或者是29天，有的人可能會(huì)想著還需要判斷當(dāng)前年是否為閏年或者平年，再以此在判斷當(dāng)前月是多少天，這樣就復(fù)雜了，js date對(duì)象有更簡(jiǎn)單的方式

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

④ 把開(kāi)始時(shí)間和結(jié)束事件整成時(shí)間戳，方便計(jì)較

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

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

    const getDateRange = () => {
      const date = new Date()
      const year = date.getFullYear(); //獲取年份
      let month = date.getMonth() + 1; //獲取月份
      const lastDay = new Date(year, month, 0).getDate(); //獲取當(dāng)月最后一日
      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簡(jiǎn)化版1

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

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

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簡(jiǎn)化版2

思路就是利用day.js中的isBetween插件進(jìn)行日期區(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
},

day.js非常輕巧，功能強(qiáng)大，插件眾多，用好了絕對(duì)是前端的一大殺器，感興趣的不妨試試！

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

您可能感興趣的文章: