1. 首页
  2. 前端

element-ui中日期组件的高级应用和实际业务场景的应用

在实际业务的发开中,常常会遇到起始日期和结束日期的选择场景,一般业务逻辑中,起始日期不能大于结束日期,否则数据不合逻辑。如果能够控制起始日期和结束日期的选择范围,将是一种很好的交互体验,比如:开始日期选择的是2021-4-3,结束日期就只能选择2021-4-3之后的日期,之前的将被禁用无法选择。如果结束日期选择的是2021-4-3,那么开始日期只能选择2021-4-3之前的日期,之后的日期将被禁用无法选择。那么这种方式如何友好的控制呢?下面将根据不同业务场景进行实现。

一、起始日期和结束日期的选择范围组合

实现的完整代码如下:

/*=========== 1	模板部分===============*/
 //开始日期
<el-date-picker clearable type="date" style="width:auto" v-model="editForm.startTime"
placeholder="开始日期"
:editable="false"
@focus="limtStartDate"
:picker-options="pickerOptionspicker1"
></el-date-picker>
// 结束日期
<el-date-picker clearable type="date" style="width:auto" v-model="editForm.endTime"
placeholder="结束日期"
:editable="false"
@focus="limtEndDate"
:picker-options="pickerOptionspicker2"
></el-date-picker>

/*=========== 2	data部分===============*/
export default {
    data(){
        return {
            pickerOptionspicker1: {
                disabledDate: null
            },
            pickerOptionspicker2: {
                disabledDate: null
            }
        }
    },
    
/*=========== 2	js方法部分===============*/
    methods:{
        limtStartDate() {
          this.pickerOptionspicker1.disabledDate = time => {
            if (this.editForm.endTime) {
              let getTimestamp = new Date(this.editForm.endTime);
              return time.getTime() > getTimestamp.getTime();
            }
          };
        },
        limtEndDate() {
          this.pickerOptionspicker2.disabledDate = time => {
            if (this.editForm.startTime) {
              let getTimestamp = new Date(this.editForm.startTime);
              return time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24;
            }
          };
        }
    }
}

核心代码说明如下:

1.模板部分添加如下代码:

// 起始日期
@focus="startDate"
    :picker-options="pickerOptionspicker1"
// 结束日期
@focus="endDate"
:picker-options="pickerOptionspicker2"

2.data部分添加如下代码:

 pickerOptionspicker1: {
    disabledDate: null
},
pickerOptionspicker2: {
  disabledDate: null
}

3.js部分添加如下代码:

startDate() {
  this.pickerOptionspicker1.disabledDate = time => {
    if (this.editForm.endTime) {
      let getTimestamp = new Date(this.editForm.endTime);
      return time.getTime() > getTimestamp.getTime();
    }
  };
},
  endDate() {
    this.pickerOptionspicker2.disabledDate = time => {
      if (this.editForm.startTime) {
        let getTimestamp = new Date(this.editForm.startTime);
        return time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24;
      }
    };
  }

二、日期区间范围选择

对于区间范围选择,首先需要有一个目标日期,该目标日期不能受起始和结束日期的影响,否则没法判定日期的区间范围,因此我们首先对区间范围数据源拷贝一份作为备用,如果目标日期是当前系统日期,则不考虑备份。那么,区间范围日期选择的场景是什么呢?比如:开始目标日期是2021-3-10,结束目标日期是2021-3-20,开始日期只能选择2021-3-10至2021-3-20的日期区间,两边禁用。如果开始日期选择的是2021-3-15,则结束日期只能选择2021-3-15至2021-3-20区间;如果结束日期选择了2021-3-18,则开始日期只能选择2021-3-10至2021-3-18的区间。具体的代码实现如下:

mounted(){
    this.copyBase = JSON.parse(JSON.stringify(this.editForm)); // ①
},
methods:{
  startDate() {
    this.pickerOptionspicker1.disabledDate = time => {
      if (this.editForm.endTime) {
        let start = new Date(this.copyBase.startTime);//②
        let getTimestamp = new Date(this.editForm.endTime);
        return time.getTime() > getTimestamp.getTime()||time.getTime() < start.getTime();//③
      }
    };
  },
    endDate() {
      this.pickerOptionspicker2.disabledDate = time => {
        if (this.editForm.startTime) {
          let getTimestamp = new Date(this.editForm.startTime);
          let end = new Date(this.copyBase.endTime);//④
          return (time.getTime() <= getTimestamp.getTime() - 1000 * 60 * 60 * 24|| time.getTime() >= end.getTime() + 1000 * 60 * 60 * 24); //⑤
        }
      };
    }
}

模板部分和第一种范围选择的模板一样,核心部分详细说明:

以上限制和锁定用户选择日期范围的方式,可以避免用户选错日期范围而造成数据无效,或者二次提醒/校验而拉低用户体验。

这种方式更直观的从交互层面上杜绝了用户选错日期范围而造成不可预估的问题,将大大提高人机交互体验。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/1820

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code