ViewUI DatePicker日期范圍限制

🍉場景需求

近期着手開發酒店住宿相關功能模塊，其間涉及到對日期進行相應條件的限制。最初因為公司網絡問題，無法訪問ElementUI網站進行開發，偶然間發現ViewUI，感覺代碼看起來比較簡潔，也符合我的選擇需求，最后就選擇了ViewUI進行開發。當初使用它時，還是免費的，現在逐步商業化了，但是需要使用高級功能的話可能就需要付費了，感覺沒有ElementUI香了。但是沒辦法，已經上了🚗了，再下👇就難了。
此次主要就ViewUI DatePicker日期選擇器的相關使用技巧做相應的介紹。因為在我的項目中需要指定可選擇的日期，故需要對可選日期的范圍做相應的限制，現將我所實現的效果做如下展示：

🍭示例展示

• 【圖一】入住時間限制

        - **🌞 timeOut1**：入住最早時間
        - **🌜 timeOut2**：入住最晚時間
        - **🌝 timeNow**：當前時間    

• 【圖二】離開時間限制

        - **🌞 timeOut1**：離開最早時間
        - **🌜 timeOut2**：離開最晚時間
        - **🌝 timeNow**：當前時間

🌱代碼案例

<template>
    <Form :model="bookInfo" :rules="rules" :label-width="80">
        <!-- 住店時間 -->
        <FormItem label="入住時間" prop="checkInTime">
            <DatePicker type="date" :editable="false" :value="bookInfo.checkInTime" :options="optionsIn"></DatePicker>
        </FormItem>
        <!-- 離開時間 -->
        <FormItem label="離開時間" prop="checkOutTime">
            <DatePicker type="date" :editable="false" :value="bookInfo.checkOutTime" :options="optionsOut"></DatePicker>
        </FormItem>
    </Form>
</template>

🍅：HTML代碼，使用ViewUI DatePicker 組件進行時間選擇限制。

import DayJS from "dayjs";

export default {
    name: "CenterBook",
    data() {
        return {
            bookInfo: {
                checkInTime: "" /* 入住時間 */,
                checkOutTime: "" /* 離開時間 */
            },
            /* 時間正則 */
            rules: {
                checkInTime: [{ required: true, message: "請選擇入住時間", trigger: "change" }],
                checkOutTime: [{ required: true, message: "請選擇離開時間", trigger: "change" }]
            },
            checkInEndTime: "" /* 入住開始時間 */,
            checkInStartTime: "" /* 入住截止時間 */,
            checkOutEndTime: "" /* 離店開始時間 */,
            checkOutStartTime: "" /* 離店截止截止 */,
            optionsIn: {
                disabledDate: date => {
                    let tmp1 = this.checkInStartTime,
                        tmp2 = this.checkInEndTime;
                    if (DayJS(tmp1).valueOf() < Date.now()) {
                        return date < DayJS().subtract(1, "day") || date > new Date(tmp2);
                    }
                    return date < DayJS(tmp1) || date > new Date(tmp2);
                }
            } /* 入住時間限制 */,
            optionsOut: {
                disabledDate: date => {
                    let tmp1 = this.checkOutStartTime,
                        tmp2 = this.checkOutEndTime;
                    if (DayJS(tmp1).valueOf() > Date.now()) {
                        return date < DayJS(tmp1) || date > new Date(tmp2);
                    }
                    return date < DayJS().subtract(1, "day") || date > new Date(tmp2);
                }
            } /* 離開時間限制 */
        };
    }
};

🍋：對日期選擇進行動態限制，options 參數接收一個含有指定參數 disabledDate 的對象，對要選擇的日期進行相關限制處理；
🍌：disabledDate 接收一個date參數，返回一個bolearn類型的布爾值，即限制不可選的日期。
🍎：借助 Dayjs 來處理時間數據，相對來說，功能API都比較豐富，建議學習一下。