element UI+vue关于日期范围选择的操作,picker-options属性的使用

一般

<el-date-picker />使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。
代码如下:
1,起始日期:
     <el-form-item
                    label="有效起始日期"
                    prop="title"
                  >
                    <el-date-picker
                      v-model="info.startDate"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerIssueOptions"
                      size="mini"
                      style="width:100%;height:30px"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                    />
2,截止日期:
     <el-form-item
                    label="有效截止日期"
                    prop="title"
                  >
                    <el-date-picker
                      v-model="info.endDate"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="pickerExpireOptions"
                      size="mini"
                      style="width:100%;height:30px"
                      format="yyyy 年 MM 月 dd 日"
                      value-format="yyyy-MM-dd"
                    />
然后主要是针对picker-options的操作:
 在data中写上
  
  pickerIssueOptions: {
        disabledDate: (time) => {
          if (!this.info.endDate) { return false }
          return time.getTime() > new Date(this.info.endDate.replace(/-/g, '/')).getTime()
        }
      },
      pickerExpireOptions: {
        disabledDate: (time) => {
          if (!this.info.startDate) { return false }
          return time.getTime() < new Date(this.info.startDate.replace(/-/g, '/')).getTime()
        }
      },
即可,注意if里面的判断。
posted @ 2019-12-02 18:48  清风引佩下瑶台  阅读(4660)  评论(1编辑  收藏  举报