HTML
<el-form-item label="开始日期" prop="startTime"><el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStartq" placeholder="请选择开始时间"></el-date-picker></el-form-item><el-form-item label="结束日期" prop="endTime"><el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEndq" placeholder="请选择结束时间"></el-date-picker></el-form-item>
JS: (写在data内)
满足开始日期不能大于结束日期,并且****几种情况如下:
开始日期不能大于结束日期
pickerOptionsStart: {disabledDate: time => {if (this.form.endTime) {return (time.getTime() >new Date(this.form.endTime).getTime() -1 * 24 * 60 * 60 * 1000);}}},pickerOptionsEnd: {disabledDate: time => {return (time.getTime() <new Date(this.form.startTime).getTime() -8.64e7 +1 * 24 * 60 * 60 * 1000);}},
开始日期不能大于结束日期 --选择今天以后的日期--今天可选
pickerOptionsStart: {disabledDate: time => {if (this.form.endTime) {return (time.getTime() < Date.now() - 8.64e7 ||time.getTime() >new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000);}return time.getTime() < Date.now() - 8.64e7;}},pickerOptionsEnd: {disabledDate: time => {return (time.getTime() < Date.now() - 8.64e7 ||time.getTime() <new Date(this.form.startTime).getTime() -8.64e7 +1 * 24 * 60 * 60 * 1000);}},
开始日期不能大于结束日期--选择今天以后的日期--今天不可选
pickerOptionsStart: {disabledDate: time => {if (this.form.endTime) {return (time.getTime() < Date.now() - 8.64e7 ||time.getTime() >new Date(this.form.endTime).getTime() - 1 * 24 * 60 * 60 * 1000);}return time.getTime() < Date.now();}},pickerOptionsEnd: {disabledDate: time => {return (time.getTime() < Date.now() ||time.getTime() <new Date(this.form.startTime).getTime() -8.64e7 +1 * 24 * 60 * 60 * 1000);}},
开始日期不能大于结束日期--选择今后一年内的日期
pickerOptionsStart: {disabledDate: time => {if (this.form.endTime) {return (time.getTime() <new Date(this.form.endTime).getTime() - 365 * 24 * 60 * 60 * 1000);}}},pickerOptionsEnd: {disabledDate: time => {return (time.getTime() >new Date(this.form.startTime).getTime() +8.64e7 +365 * 24 * 60 * 60 * 1000);}},
只有一个日期框, 要求只能选今天以后的
pickerOptions: {disabledDate: time => {// return time.getTime() < Date.now() - 8.64e7; // 今天可选return time.getTime() < Date.now();//今天不可选}},