element 日期控件 限制开始日期和结束日期

基于element ui中的时间日期控件的开始日期和结束日期的限制用picker-options属性， 当前日期时间器特有的选项。

代码如下：

<el-form-item

                          label="开始日期"

                          label-width="90px"

                          prop="startDate">

                          <el-date-picker

                            v-model="statDate"

                            :picker-options="startDateOptions"

                            type="date"

                            clearable

                            style="width:140px"

                            value-format="yyyy-MM-dd"

                            placeholder="开始日期"/>

                        </el-form-item>

 

<el-form-item

                          label="结束日期"

                          label-width="90px"

                          prop="endDate">

                          <el-date-picker

                            v-model="endDate"

                            :picker-options="EndDateOptions"

                            type="date"

                            clearable

                            style="width:140px"

                            value-format="yyyy-MM-dd"

                            placeholder="结束日期"/>

                        </el-form-item>

 

 

 

export default{

data() {

    return {

　　　

 // 时间开始测试

      startDateOptions: {

        // console.log(time)

        disabledDate: (time) => {

          if (!Object.is(this.endDate, '')) {

            return time.getTime() > Date.now(this.endDate) - 8.64e7 || time.getTime() > new Date(this.endDate).getTime()// 如果当天可选，就不用减8.64e7

          } else {

            return time.getTime() > Date.now(this.endDate) - 8.64e7

          }

        }

      },

      // 时间结束测试

      EndDateOptions: {

        disabledDate: (time) => {

          return time.getTime() < new Date(this.statDate).getTime() || time.getTime() > Date.now() || time.getTime() > Date.now(this.statDate) - 8.64e7 // 如果当天可选，就不用减8.64e7

        }

      },

 statDate: '',

        // 结束日期

        endDate: '',

        // 开始日期至结束日期

　

}

}

}

 

使用了es6的新特性中箭头函数，箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，省略掉了{ ... }和return。还有一种可以包含多条语句，这时候就不能省略{ ... }和return

 

 

转载于:https://www.cnblogs.com/yearshar/p/11555157.html