element组件中的时间选择器，禁用选择时间，picker-options属性详解，时间选择器范围控制（8.64e6和8.64e7）

小鱼儿 2023-10-09 17:31 9阅读 0赞

#### 简述：我们在写Echarts的时候，难免会使用时间选择器，而且在需要选择日期时，有时需要限制用户选择的时间，这个时候就用到picker-options属性了，这里来做下记录。 ####

**1、****时间选择器**

<el-date-picker
            v-model="patientDate"
            type="daterange"                     //注意选择日期类型的转换，不行就用两个
            :picker-options="disableTime"        //命名为disableTime
            value-format="yyyy-MM-dd"
            @change="chosePatientDate(patientDate)"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
    </el-date-picker>

**2、****在data中，使用disableTime来定义可以选择的时间范围**

data() {
        return {
          // 日期限制
          disableTime: {
            disabledDate: (time) => {
              // 只能选择当前 1 年内的时间
              const year = 365 * 24 * 3600 * 1000;
              // 只能选择当前 1 月的时间
              const month = 30 * 24 * 3600 * 1000;
              // 只能选择当前 1 周的时间
              const week = 7 * 24 * 3600 * 1000;
              // tips：从当前日期开始往前算，如果当前日期可选的话，写成8.64e6
              return (
                time.getTime() > Date.now() - 8.64e7 ||
                time.getTime() < Date.now() - 8.64e7 - year * 2
              );
            },
          },
        };
      },

**这里限制的是，只可以选择两年前到今天的日期，今天不可选。**

**解析：**

**（1）、****time.getTime() < Date.now() - 8.64e7 代表着可以选今天之后的日期；**

**（2）、****time.getTime() > Date.now() - 8.64e7 代表着可以选今天之前的日期；**

**（3）、****8.64e7 是一天毫秒数，****而8.64e6 表示可以选择今天的时间，****包括了当前的一天。**