小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

date-picker 开始时间小于结束时间的限定

• 最近在项目中遇到一个开始时间小于结束时间的限制问题，产品要求所有的计划开始时间小于计划结束时间，施工开始时间小于施工结束时间等等。比如施工开始时间选择9月2号，那么在选择施工结束时间的时候9月2号之前的日期不可选择状态，呈现灰色，只能选择2号之后的日期。

<el-form-item label="施工开始时间">
    <el-date-picker
        v-model="starttime"
        :value-format="formattime"
        type="date"
        :picker-options="pickerStartOptions"
    ></el-date-picker>
</el-form-item>
<el-form-item label="施工结束时间">
    <el-date-picker
        v-model="endtime"
        :value-format="formattime"
        type="date"
        :picker-options="pickerEndOptions"
    ></el-date-picker>
</el-form-item>

这是个vue+elementui 的项目，需要在data中声明变量。

    return {
         starttime:'',
         endtime:'',
         formattime:'yyyy/mm/dd',
         pickerStartOptions: {
                disabledDate: (time) => {
                    if (this.endtime != "") {
                        return time.getTime() >  new Date(this.endtime).getTime();
 
                }
            },
            pickerEndOptions: {
                disabledDate: (time) => {
                    return time.getTime() < new Date(this.starttime).getTime();
                }
            },
    }      
}

v-model 的值是毫秒级的，在保存的时候需要转换成2021-09-02的格式，在utils的config.js里export一个时间转化的公共方法。然后在查看的时候需要把日期格式转换成毫秒级的才会显示。

//毫秒级日期 转 ‘年-月-日’
//补0
function setzero(num) { 
    if (num < 10) {
       return '0' + num;
      } else { 
       return '' + num; 
     } 
 }
export function getdate(seconds) {
        var time = new Date(seconds);
	var year = time.getFullYear();//年
	var mon = setzero(time.getMonth() + 1);//月
	var day = setzero(time.getDate());//日
        return year + " - " + mon + " - " + day ;
}
//‘年-月-日’转毫秒级日期
export function getseconds(date){
       return (new Date(data)).getTime();
}

点击保存按钮需要传值，以及编辑按钮也需要传值。 调接口的参数是data,那么

data.starttime=(this.starttime!=="" || this.starttime !==null) ? $T.getdate(this.starttime):'';
data.endtime=(this.endtime!=="" || this.endtime !==null) ? $T.getdate(this.endtime):'';

在返回来查询浏览赋值回显的时候，调查询接口拿到data,那么

this.starttime = $T.getseconds(data.starttime);
this.endtime = $T.getseconds(data.endtime);