vue中element的DatePicker组件日期限制

目录

• 1，前言
• 2，代码背景
• 3，上代码

1，前言

---

项目迭代过程中，碰上一个需求，table表格，其中一列计划开始时间一列计划结束时间，使用的是不同的日期选择器，开始时间会限制结束时间只能选相同日期以及之后的日期，反之结束时间也如此。项目用的是elementUi的Table组件，记录一下在Table中怎么写日期选择器DatePicker的picker-options。

2，代码背景

---

vue.js版本2.x

element版本2.15.2

博主这边的数据格式是开始时间是一个字段，结束时间也是一个字段。post数据格式类似于

res.data = {
	begin_date:'2021-01-01',
	end_date:'2021-06-28'
}

DatePicker组件的日期禁止利用的是disabledDate这个字段，它返回一个Boolean值

3，上代码

---

HTML部分

<el-table
  :data="dataList"
  style="width: 100%"
  row-key="node_id"
  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  default-expand-all
>
	<el-table-column label="计划开始日期" width="200">
	  <template slot-scope="scope">
	    <el-date-picker
	      width="180"
	      v-model="scope.row.begin_date"
	      format="yyyy-MM-dd"
	      value-format="yyyy-MM-dd"
	      type="date"
	      placeholder="选择开始日期"
	      :disabled="(nowTemplateStatus !=='草稿' && pageStatus !=='add')"
	      :picker-options="banStartTime(scope.row.end_date)"
	    >
	    </el-date-picker>
	  </template>
	</el-table-column>
	<el-table-column label="计划完成日期" width="200">
	  <template slot-scope="scope">
	    <el-date-picker
	      width="180"
	      v-model="scope.row.end_date"
	      format="yyyy-MM-dd"
	      value-format="yyyy-MM-dd"
	      type="date"
	      placeholder="选择结束时间"
	      :disabled="(nowTemplateStatus !=='草稿' && pageStatus !=='add')"
	      :picker-options="banEndTime(scope.row.begin_date)"
	    >
	    </el-date-picker>
	  </template>
	</el-table-column>
</el-table>

methods部分

// 开始时间禁止
  banStartTime(now) {
    let obj
    if (now) {
      obj = {
        disabledDate(time) {
          let date = new Date(now).getTime()
          return time.getTime() > date
        }
      }
    } else {
      obj = {
        disabledDate(time) {
          return false
        }
      }
    }
    return obj
  },
  // 结束时间禁止
  banEndTime(now) {
    let day = 24 * 3600 * 1000
    let obj
    if (now) {
      obj = {
        disabledDate(time) {
          return time.getTime() < (new Date(now).getTime() - day)
        }
      }
    } else {
      obj = {
        disabledDate(time) {
          return false
        }
      }
    }
    return obj
  }

如果看了觉得有帮助的，我是@上进的鹏多多，欢迎 点赞 关注 评论；
END

往期文章

• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• 细数JS中实用且强大的操作符&运算符
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
• 微信小程序实现搜索关键词高亮

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金