Element-UI日期组件限定日期范围1/1日 - 1/3日

element-ui组件日期选择器限定范围选择

如2020/1/1-2020/1/3限定范围选择

下面举例在表格中的嵌套使用，能看懂的小伙伴以此类推。

直接上代码！！！

<template>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-form :model="tableData">
            <el-row>
              <el-table :data="tableData.data" border style="width: 100%">
                <el-table-column label="日期" align="center">
                  <template slot-scope="scope">
                    <!-- 
                      使用scope可以获取每一行的数据
                      v-model="scope.row.date"    绑定表格数据
                      type="date"                 类型
                      format="yyyy/MM/dd"         日期格式
                      value-format="yyyy/MM/dd"   选中值的格式
                      placeholder="选择日期"       提示文本
                      :clearable="false"          是否显示清空icon图标
                      :picker-options="pickerOptions"   当前时间日期选择器特有的选项参考下表
                      @focus="changedate()"        输入框获取焦点时触发事件
                       -->
                    <el-date-picker
                      v-model="scope.row.dateaa"
                      type="date"
                      format="yyyy/MM/dd"
                      value-format="yyyy/MM/dd"
                      placeholder="选择日期"
                      :clearable="false"
                      :picker-options="pickerOptions"
                      @focus="
                        changeDate(scope.row.startDate, scope.row.endDate)
                      "
                    >
                    </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column prop="aBox" align="center" label="A仓库">
                </el-table-column>
                <el-table-column prop="bBox" align="center" label="B仓库">
                </el-table-column>
              </el-table>
            </el-row>
          </el-form>
          <el-row>
            <el-button size="small" type="success" @click="ScheduleBudget()"
              >提交</el-button
            >
          </el-row>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        // 此处使用箭头函数！！！！！注意this指向问题
        disabledDate: (time) => {
          let Sdate = new Date(this.tempStartDate);
          let Edate = new Date(this.tempEndDate);
          return time.getTime() > Edate || time.getTime() < Sdate;
        },
        // 错误写法
        // disabledDate(time) {
        //   let Sdate = new Date(this.tempStartDate);
        //   let Edate = new Date(this.tempEndDate);
        //   return time.getTime() > Edate || time.getTime() < Sdate;
        // },
      },

      //临时存储起止时间
      tempStartDate: "",
      tempEndDate: "",
      tableData: {
        data: [
          {
            startDate: "2022/04/06",
            endDate: "2022/04/10",
            dateaa: "",
            aBox: "122台",
            bBox: "158台",
          },
          {
            startDate: "2022/04/11",
            endDate: "2022/04/11",
            dateaa: "",
            aBox: "200台",
            bBox: "133台",
          },
        ],
      },
    };
  },
  methods: {
    // 获取日期焦点,保存日期取值范围
    changeDate(start, end) {
      this.tempStartDate = start;
      this.tempEndDate = end;
    },
    // 提交按钮
    ScheduleBudget() {
      this.$message({
        showClose: true,
        message: "submit!!",
        type: "success",
      });
    },
  },
};
</script>
<style scoped>
</style>