<el-date-picker 
    v-model="timeArrange" 
    @focus="timeEditable" 
    :editable="false" 
    type="datetimerange" 
    range-separator="至" start-placeholder="開始日期" 
    value-format="YYYY-MM-DD HH:mm:ss" 
    :disabled-date="disabledDateFn" 
    @calendar-Change="calendarChange" 
    end-placeholder="結束日期" 
    style="width: 100%" 
/>

const disabledDateFn = (time: any) => {
    // 如何選擇了一個日期
    if (choiceDate.value) {
        // 7天的時間戳
        const one = 6 * 24 * 3600 * 1000;
        // 當前日期 - one = 7天之前
        const minTime = choiceDate.value - one;
        // 當前日期 + one = 7天之后
        const maxTime = choiceDate.value + one;
        return (
            time.getTime() < minTime ||
            time.getTime() > maxTime
            // 限制不能選擇今天及以后
            // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
        );
    } else {
        // 如果沒有選擇日期，就要限制不能選擇今天及以后
        // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
    }
}

const calendarChange = (obj: any) => {
    const minDate = obj[0]
    const maxDate = obj[1]
    // 把選擇的第一個日期賦值給一個變量。
    choiceDate.value = minDate.getTime();
    // 如何你選擇了兩個日期了，就把那個變量置空
    if (maxDate) choiceDate.value = null;
}

//組件禁止組件里面的input輸入值
const timeEditable = ()=>{
    nextTick(() => {
        let els = document.querySelectorAll('.el-input__wrapper input');
        for (var i = 0; i <= els.length - 1; i++) {
            els[i].setAttribute('readonly', 'readonly');
        }
    })
}