有两个需求，一个是录入页面，开始时间和结束时间是两个表单元素，分开着的，要做限制；另一个是时间搜索选项，要选择时间范围，这个是要用同一个日期选择框，要做限制；
两个日期选框需求：
- 结束日期不能大于开始日期，
- 选择时间在当日（包含当日）后的14天内；
一个日期选框需求：
- 选择时间当日前，整体范围在三年内，
- 选择时间范围不能超过一个月；
日期限制思路
一个选框，结束日期不能大于日期，可以在选择@change后判断两个日期大小，如果不符合条件，触发表单验证提示。或者在一个选择后，另一个设置disabledDate。选择时间在当日（包含当日）后的14天内也在disabledDate中设置；
两个选框，主要计算一个月范围，不是30天，而且要判断选择的第一个日期的前一个月和后一个月范围去做disabledDate；三年主要是计算三年的时间。
下面直接来案例
1.两个日期选框
<el-form :rules="dataRule" v-bind:model="dataForm" ref="dataForm">
<el-form-item prop="disStartDate">
<el-date-picker
v-model="dataForm.disStartDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请输入优惠开始日期"
:picker-options="pickerOptionsS"
@blur="startDateBlur"
></el-date-picker>
</el-form-item>
<el-form-item prop="disEndDate">
<el-date-picker
v-model="dataForm.disEndDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="请输入优惠结束日期"
:picker-options="pickerOptionsE"
@blur="endDateBlur"
></el-date-picker>
</el-form-item>
</el-form>
<script>
export default {
name: "addEdit",
data() {
return {
dataForm: {
disStartDate: '',
disEndDate: ''
},
pickerOptionsS: {
disabledDate:(time)=> {
// 设置可选择的日期为今天之后的一个月内
let curDate = (new Date()).getTime();
// 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
let day = 14 * 24 * 3600 * 1000;
let dateRegion = curDate + day;
let end = "";
if(!this.disStartDate && this.disEndDate){
end = new Date(this.disEndDate).getTime();
return time.getTime() < curDate || time.getTime() >= dateRegion || time.getTime() > end;
}else{
return time.getTime() < curDate //限制小于当天的日期
|| time.getTime() >= dateRegion ; //限制大于14天后的日期
}
}
},
pickerOptionsE: {
disabledDate:(time)=> {
let curDate = (new Date()).getTime();
let day = 14 * 24 * 3600 * 1000;
let dateRegion = curDate + day;
let start = "";
if(this.disStartDate && !this.disEndDate){
start = new Date(this.disStartDate).getTime();
return time.getTime() < curDate || time.getTime() >= dateRegion || time.getTime() < start;
}else{
return time.getTime() < curDate //限制小于当天的日期
|| time.getTime() >= dateRegion ; //限制大于14天后的日期
}
}
},
dataRule: {
disStartDate: [
{
required: true,
validator: (rule, value, callback) => {
let start = value ? new Date(value).getTime() : 0;
let end = this.dataForm.disEndDate ? new Date(this.dataForm.disEndDate).getTime() : 0;
if(!start){
return callback(new Error('优惠开始日期不能为空'))
}if(start && end && start > end){
this.dataForm.disStartDate = "";
return callback(new Error('优惠结束日期需大于开始日期'))
}else{
callback();
}
},
trigger: "blur"
}
],
disEndDate: [
{
required: true,
validator: (rule, value, callback) => {
let start = this.dataForm.disStartDate ? new Date(this.dataForm.disStartDate).getTime() : 0;
let end = value ? new Date(value).getTime() : 0;
if(!start){
return callback(new Error('优惠结束日期不能为空'))
}else if(start && end && start > end){
this.dataForm.disEndDate = "";
return callback(new Error('优惠结束日期需大于开始日期'))
}else{
callback();
}
},trigger: "blur"
}
]
}
}
},
methods: {
startDateBlur(){
this.$refs.dataForm.validateField('disEndDate');
},
endDateBlur(){
this.$refs.dataForm.validateField('disStartDate');
},
}
}
</script>
2.一个日期选框
<el-form-item class="date-range" label="制单日期范围">
<el-date-picker
v-model="timeRange"
:clearable="false"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="transferDateChange"
:picker-options="pickerOptions"
></el-date-picker>
</el-form-item>
export default {
name: "addEdit",
data() {
let _minDate = "";
let _maxDate = "";
return {
dataForm: {
timeRange: [],
queryData: {},
pickerOptions: {
onPick(time){
_minDate = time.minDate ? time.minDate : '';
_maxDate = time.maxDate ? time.maxDate : '';
},
disabledDate(time) {
let today = that.$util.formatDate(new Date());
let threeYearAgo = new Date().getFullYear() - 3 + today.slice(4);//近3年
if (_minDate && !_maxDate) {
let threeMonthAgo = "";
let threeMonthLater = "";
let selectMinDate = that.$util.formatDate(new Date(_minDate));
let selectMinDateMon = Number(new Date(_minDate).getMonth());
//获取三个月前的日期
if(new Date(_minDate).getMonth()>2){
threeMonthAgo = selectMinDate.slice(0,5) + that.$validate.formatMonDay(selectMinDateMon - 2) + selectMinDate.slice(7);
}else{
threeMonthAgo = (selectMinDate.slice(0,4) -1) + "-" + that.$validate.formatMonDay(selectMinDateMon - 2 + 12) + selectMinDate.slice(7);
}
//获取三个月后的日期
if(new Date(_minDate).getMonth()>8){
threeMonthLater = (Number(selectMinDate.slice(0,5))+1) + that.$validate.formatMonDay(selectMinDateMon -12 + 4) + selectMinDate.slice(7);
}else{
threeMonthLater = selectMinDate.slice(0,5) + that.$validate.formatMonDay(selectMinDateMon + 4) + selectMinDate.slice(7);
}
return time.getTime() > new Date(threeMonthLater).getTime() || time.getTime() < new Date(threeMonthAgo).getTime()
|| time.getTime() > new Date().getTime() || time.getTime() < new Date(threeYearAgo).getTime();
}else{
return time.getTime() > new Date().getTime() || time.getTime() < new Date(threeYearAgo).getTime();
}
},
}
},
methods:{
transferDateChange(){
this.queryData.startDate = this.timeRange ? this.timeRange[0] : '';
this.queryData.endDate = this.timeRange ? this.timeRange[1] : '';
}
}
}