Element Ui 日期控件如何限定可选择日期范围

最新推荐文章于 2024-07-02 13:08:24 发布

抓佬

最新推荐文章于 2024-07-02 13:08:24 发布

阅读量3.1k

点赞数 2

文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/zhualao/article/details/116591301

版权

本文介绍了如何使用Element UI的日期控件来限定可选择的日期范围，包括单个日期选择框和日期区间的选择。示例涵盖了设置今天及之前、今天及之后、特定日期区间等多个场景，确保在前端开发中实现各种日期限制需求。

摘要由CSDN通过智能技术生成

常用的几种限制日期的使用情景：

一、首选是单个日期选择框：

组件代码如下：

<el-date-picker
   v-model="value1"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions">
</el-date-picker>

注意：pickerOptions这个要写到data()里

情景1: 设置选择今天以及今天之前的日期

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() > Date.now() - 8.64e6
			}
		}
	}
}

情景2：设置选择今天以及今天以后的日期

data () {
	return {
		pickeroptions: {
			disabledDate (time) {
				return time.getTime() < Date.now() - 8.64e7
			}
		}
	}
}

情景3：设置选择今天之前的日期(不包含今天）

data () {
	return {
		pickerOptions: {
			disabledDate (time) {
				return time.getTime() > Date

关注