Vue Element UI 限定日期范围选择,picker-options属性的使用

转载  清风引佩下瑶台   2020-08-26   1556人阅读  0 条评论

一般<el-date-picker/>使用会出现起始日期和结束日期,结束日期不能早与起始日期,选择了其实日期后,结束日期大于起始日期的不可选,置灰,同理先选结束日期后再选起始日期,那么起始日期不能选截止日期后面的。如图

image.png

实现效果:

<el-row>
  <el-col :span="7">
    <el-form-item label="开始日期:" label-width="90px" prop="planStartDate" class="planStartDate">
      <el-date-picker v-model.trim="qualityCheckPlanSaveDto.qualityCheckPlan.planStartDate" :picker-options="pickerIssueOptions" value-format="yyyy-MM-dd" type="date" placeholder="请选择计划开始日期" default-value="" />
    </el-form-item>
  </el-col>
  <el-col :span="17">
    <el-form-item label="结束日期:" label-width="90px" prop="planEndDate" class="planEndDate">
      <el-date-picker v-model.trim="qualityCheckPlanSaveDto.qualityCheckPlan.planEndDate" :picker-options="pickerExpireOptions" value-format="yyyy-MM-dd" type="date" placeholder="请选择计划结束日期" default-value="" />
    </el-form-item>
  </el-col>
</el-row>
data(){
    return{
        qualityCheckPlanSaveDto: JSON.parse(JSON.stringify(this.childData)),
        pickerIssueOptions: {
          disabledDate: (time) => {
            if (!this.qualityCheckPlanSaveDto.qualityCheckPlan.planEndDate) { return false }
            return time.getTime() > new Date(this.qualityCheckPlanSaveDto.qualityCheckPlan.planEndDate.replace(/-/g, '/')).getTime()
          }
        },
        pickerExpireOptions: {
          disabledDate: (time) => {
            if (!this.qualityCheckPlanSaveDto.qualityCheckPlan.planStartDate) { return false }
            return time.getTime() < new Date(this.qualityCheckPlanSaveDto.qualityCheckPlan.planStartDate.replace(/-/g, '/')).getTime()
          }
        }
    }
}


本文地址:https://www.zjh336.cn/?id=1960
温馨提示:文章内容系作者个人观点,不代表华仔部落_个人博客对观点赞同或支持。
版权声明:本文为转载文章,来源于 清风引佩下瑶台 ,版权归原作者所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?