关于日历控件的封装

一、需求描述

用一个日期控件实现，没有时间范围

二、实现思路

查看api发现 ，所实现的条件都是基于 跨时间范围 ，type='daterange'

三、实现效果图

早于当天的 和 大于 6 个月的 都设置为禁用

四、代码案例

html

<el-date-picker
 type="date"
      placeholder="选择日期"
      v-model="form.applyDate"
      value-format="yyyy-MM-dd HH:mm:ss"
      style="width: 100%;"
      :picker-options="pickerOptions"
    ></el-date-picker>

js

 pickerOptions:{
          disabledDate(time) {
            let startDay = Date.now() - 8.64e7
             // 限制结束时间只能是未来31天
            let endDay = startDay + 24 *3600 *1000 *30 * 6;

            return time.getTime() < startDay || time.getTime() > endDay;
          },
      },
      form: {
        applyDate: "" //日期
      },

五、说明

主要用到 picker-options属性