0
点赞
收藏
分享

微信扫一扫

vue中element的DatePicker组件日期限制

深夜瞎琢磨 2021-09-23 阅读 51

1,前言


项目迭代过程中,碰上一个需求,table表格,其中一列计划开始时间一列计划结束时间,使用的是不同的日期选择器,开始时间会限制结束时间只能选相同日期以及之后的日期,反之结束时间也如此。项目用的是elementUiTable组件,记录一下在Table中怎么写日期选择器DatePickerpicker-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
  }

如果看了觉得有帮助的,我是@鹏多多11997110103,欢迎 点赞 关注 评论;
END

往期文章

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

个人主页

举报

相关推荐

0 条评论