快捷導(dǎo)航

el-date-picker 如何限制選擇六個月內(nèi)的日期

更新時間：2024年07月12日 11:24:04 作者：一個大蘿北

這篇文章主要介紹了el-date-picker 如何限制選擇六個月內(nèi)的日期,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

效果如圖：

代碼：

 <el-date-picker v-model="serchTimes" type="daterange" size="small" start-placeholder="開始時間"
                                range-separator="~" end-placeholder="結(jié)束時間" format="yyyy / MM / dd "
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="changeTime"
                                :default-time="['00:00:00', '23:59:59']"  :unlink-panels="true" :validate-event="false" :clearable="false">
                            </el-date-picker>

主要：:picker-options=“pickerOptions” 中的配置：

在onPick配置項中可以獲取到點擊時的時間，將其轉(zhuǎn)換為時間戳后存儲起來。

在disabledDate配置項中配置只能選擇前后6個月，這個配置項的參數(shù)是當(dāng)前的日期，返回參數(shù)要求是Boolean值

其他屬性解析：format="yyyy / MM / dd ": 選擇后顯示的樣式

default-time 是因為需要默認(rèn)的時分秒才添加的

value-format 是點擊確認(rèn)后，change事件中能獲取到的數(shù)據(jù)格式，

在這里插入圖片描述

:unlink-panels=“true” 是取消兩個面板之間的聯(lián)動滾動

:validate-event=“false” 取消點擊時的校驗，按需寫

:clearable=“false” 取消清除功能，按需寫

data(){
    return{
        serchTimes: '',
        selectData: '',
        pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.selectData = maxDate ? maxDate.getTime() : minDate ? minDate.getTime() : ''
                     if (!maxDate || !minDate) {
                        this.serchTimes = ''  //只選一個的時候，日期置空
                    }
                },
                },
                disabledDate: (time) => {
                    if (this.selectData) {
                        const curDate = this.selectData;
                        const three = 183 * 24 * 3600 * 1000;// 6個月
                        const threeMonthsAfter = curDate + three; // 開始時間+6個月
                        const threeMonthsBefore = curDate - three; //開始時間-6個月
                        return time.getTime() > threeMonthsAfter || time.getTime() < threeMonthsBefore;
                    }
                }
        },
    }
},
methods：{
    //選擇時間后的處理函數(shù)了，可以把數(shù)據(jù)保存后發(fā)送接口等等操作
     changeTime() {
            if (this.serchTimes) {
                this.reloadForm.begAbsTime = this.serchTimes[0]
                this.reloadForm.endAbsTime = this.serchTimes[1]
            }
        },
}

到此這篇關(guān)于el-date-picker 限制選擇六個月內(nèi)的日期的文章就介紹到這了,更多相關(guān)el-date-picker 限制選擇日期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: