el-date-picker限制可选时间范围

最新推荐文章于 2024-08-09 16:49:47 发布

原创最新推荐文章于 2024-08-09 16:49:47 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Element框架常遇问题专栏收录该内容

13 篇文章

订阅专栏

文章展示了如何在Vue应用程序中使用el-date-picker组件来限制用户可选的日期范围。通过v-model绑定数据，并使用:disabled-date属性配合自定义方法disabledStartDate和disabledEndDate，确保开始日期不会晚于结束日期，结束日期也不会早于开始日期。

el-date-picker限制可选时间范围

<el-form-item label="募集期起始时间">
	<el-date-picker v-model="formData.raisedStartDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" :disabled-date="disabledStartDate"></el-date-picker>
</el-form-item>
<el-form-item label="募集期结束时间">
	<el-date-picker v-model="formData.raisedEndDate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" :disabled-date="disabledEndDate"></el-date-picker>
</el-form-item>

const state = reactive<any>({
	formData: {
		raisedStartDate: '',
		raisedEndDate: '',
	},
	disabledStartDate: (time: Date) => {
		return time.getTime() > new Date(state.formData.raisedEndDate).getTime();
	},
	disabledEndDate: (time: Date) => {
		return time.getTime() < new Date(state.formData.raisedStartDate).getTime();
	},
});