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都比较丰富，建议学习一下。