elementUI-日期选择器（两个框限制选择范围、快捷键选择）

快来打我* 2022-11-26 07:52 409阅读 0赞

.el-input { 
    		width: 30%;
    		margin-right: 20px;
    	}

new Vue({ 
    	el:'#page',//选择元素，通常都是id
    	data: function() { 
    		return {  //定义的变量
    			value1: '',
    			value2: '',
    			//注意：-----下面的javascript部分的代码放在这里
    		}
    	},
    })

## 两个日期框选择 ##

### 1、快捷键选择 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]

<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
    			</el-date-picker>

pickerOptions: { 
    		disabledDate(time) { 
    			return time.getTime() > Date.now();
    		},
    		shortcuts: [{ 
    			text: '最近一周',
    			onClick(picker) { 
    				const end = new Date();
    				const start = new Date();
    				start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
    				picker.$emit('pick', [start, end]);
    			}
    		}, { 
    			text: '最近一个月',
    			onClick(picker) { 
    				const end = new Date();
    				const start = new Date();
    				start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    				picker.$emit('pick', [start, end]);
    			}
    		}, { 
    			text: '最近三个月',
    			onClick(picker) { 
    				const end = new Date();
    				const start = new Date();
    				start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
    				picker.$emit('pick', [start, end]);
    			}
    		}]
    	},

### 2、情景一 ###

1.  结束日期不能大于开始日期,可以为今天
2.  注: 结束时间最大只能为今天，开始时间只能小于或等于结束时间，
3.  如果开始时间为今天，结束时间只能为今天  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 2]

pickerOptions0: { 
    		disabledDate: (time) => { 
    			if (this.value2) { 
    				return time.getTime() > Date.now() || time.getTime() > this.value2;
    			} else { 
    				return time.getTime() > Date.now();
    			}
    		}
    	},
    	pickerOptions1: { 
    		disabledDate: (time) => { 
    			return time.getTime() < this.value1 || time.getTime() > Date.now();
    		}
    	},

### 3、情景二 ###

1.  结束日期不能大于开始日期,可以为今天
2.  先开始时间，判断为今天或以前，在结束时间，则结束时间大于等于开始时间
3.  先结束时间，判断为今天或以后，在开始时间，则开始时间小于等于结束时间

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 4]

<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions2">
    			</el-date-picker>
    			<el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions3">
    			</el-date-picker>

pickerOptions2: { 
    	disabledDate: (time) => { 
    		if (this.value2) { 
    			return time.getTime() > this.value2
    		} else { 
    			return time.getTime() > Date.now()
    		}
    	}
    },
    pickerOptions3: { 
    	disabledDate: (time) => { 
    		if (this.value2) { 
    			return time.getTime() < this.value1
    		}
    		return time.getTime() < Date.now() - 8.64e7
    	}
    },

### 3情景三 ###

1.  限制结束日期不能小于开始日期  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 5]

<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions4">
    			</el-date-picker>
    			<el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions5">
    			</el-date-picker>

pickerOptions4: { 
    	disabledDate: (time) => { 
    		if (this.value2 != "") { 
    			return time.getTime() > new Date(this.value2).getTime();
    		}
    	}
    },
    pickerOptions5: { 
    	disabledDate: (time) => { 
    		// - 1 * 24 * 60 * 60 * 1000//减去一天的时间代表可以选择同一天;
    		return time.getTime() < new Date(this.value1).getTime();
    	}
    },

### 4情景四 ###

1.  限制选择开始时间不能小于当前时间(包含当前时间)。
2.  并且结束时间不能小于开始时间（比上面多了层限时）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 6]

<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions6">
    			</el-date-picker>
    			<el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions7">
    			</el-date-picker>

pickerOptions6: {  //结束时间不能大于开始时间
    	disabledDate: (time) => { 
    		if (this.value2) { 
    			return time.getTime() > new Date(this.value2).getTime();
    		} else {  //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
    			return time.getTime() < Date.now() - 8.64e7
    		}
    
    	}
    },
    pickerOptions7: { 
    	disabledDate: (time) => { 
    		if (this.value1) { 
    			// - 1 * 24 * 60 * 60 * 1000//可以选择同一天
    			return time.getTime() < new Date(this.value1).getTime();
    		} else {  //还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
    			return time.getTime() < Date.now() - 8.64e7
    		}
    	}
    },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70]: /images/20221124/34d8ccd6056142239620d551619b64b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 1]: /images/20221124/df66e662ce1e416ab881fab537ecd4a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 2]: /images/20221124/190fbcf4be1a49f3b52a7db8bed3667b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 3]: /images/20221124/790668e368c94943ba01316b82ff1b1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 4]: /images/20221124/a8ac7c0e023148c89044f597f87306f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 5]: /images/20221124/8c4994b530af4d009560715308e3ab0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x5eDk2MTE_size_16_color_FFFFFF_t_70 6]: /images/20221124/761f13a47d2b40e3ba89d7088036b194.png