ElementUI 时间选择器如何限定选择时间

这篇具有很好参考价值的文章主要介绍了ElementUI 时间选择器如何限定选择时间。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

DatePicker 日期选择器 | Element Plus

我们如何限定我们的选择时间呢,比如限定选择时间为今天之前,或者今天之后的时间?

我们可以使用官方提供的disabled-date来实现

ElementUI 时间选择器如何限定选择时间,elementui,前端,javascript

 我们通过这个属性 做一个回调函数,在里面比较我们想要限定的时间范围,然后将结果return 就能完成时间范围的限定了 return的结果为置灰的。

我这里比较时间范围 将大于今天的时间返回,所以大于今天的时间就都置灰不可选择了。

<el-form-item label="选择时间 :" prop="endTime">
		<el-date-picker
			v-model="formInline.endTime"
			type="date"
			format="YYYY/MM/DD"
			value-format="YYYY-MM-DD"
			placeholder="请选择年月日"
			:disabledDate="formatData"
			clearable
        />
</el-form-item>
const formatData = (val: any) => {
	// 获取当前日期
	const currentDate = new Date();
	// 将时间戳转换为日期对象
	const selectedDate = new Date(val);
	// 比较选择的日期是否在当前日期之后
	return selectedDate.getTime() > currentDate.getTime();
};

ElementUI 时间选择器如何限定选择时间,elementui,前端,javascript文章来源地址https://www.toymoban.com/news/detail-756824.html

到了这里,关于ElementUI 时间选择器如何限定选择时间的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • elementUI时间选择器el-time-picker的坑

        这里有一个转换的坑需要注意 如果后端给的为默认为 Date 对象 值:\\\"2023-07-31T16:00:00.000Z\\\"或者是2023-07-31 16:00:00 这种格式拿到需要进行转换为你设定的HH:mm:ss格式,不然时间选择器会直接报错,无法识别时间类型 需要和后端协商好给什么类型格式 不然需要做一些列的时间转

    2024年02月13日
    浏览(38)
  • elementUI 时间段快捷选择及禁用(包含d2-crud-plus中使用)

    vue项目elementUI,需求为时间范围搜索,带快捷键并且只能选择今天之前,90天内的时间。搜索今天为实时数据,不能使用时间段,只能单独搜索。 ※注 需求是今天不可选,只有时间为空时才查询今天,所有下面代码中时间段快捷选择时,结束时间都是昨天。具体可根据自己需

    2024年01月25日
    浏览(36)
  • ElementUI日期选择器DatePicker限制所选时间范围(例如限制前后时长不超一个月)的实现

    未选择时间时,最初选择时间不能超过今天 选择初始时间后,第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。 例如:点击7月15日后,在8月14日往后的日期全部禁止选中 7月15日前一个月的6月15日之前的日期也全部禁止选中 选好起始时间和结束

    2024年02月14日
    浏览(37)
  • ElementUI Select选择器如何根据value值显示对应的label

    修改前效果如图所示,数据值状态应显示为可用,但实际上仅显示了状态码1,并没有显示其对应的状态信息。在排查了数据类型对应关系问题后,并没有产生实质性影响,只好对代码进行了如下修改。 修改前代码: 修改后代码:

    2024年02月15日
    浏览(37)
  • ElementUI —— Cascader 级联选择器

    前言:         项目中使用Cascader级联选择器,通过递归处理后端接口返回的数据。    

    2024年02月13日
    浏览(41)
  • 实现ElementUI中两个Select选择联动效果

    先上图 通过赋值的方式实现 即子级下拉选项循环数组为空 将所需的值对空数组 重新赋值 代码如下 第一个循环数组为 procedureType 第二个是 causeGroup 暂且称之为父级与子级 须注意的是父级下拉绑定的change事件 要对子级作出滞空操作 也就是 清空子选项的值 不然会出现切换选

    2024年02月15日
    浏览(45)
  • ElementUI Form:Cascader 级联选择器

    ElementUI安装与使用指南 Cascader 级联选择器 点击下载learnelementuispringboot项目源码 效果图 el-cascader.vue(Cascader 级联选择器)页面效果图 项目里el-cascader.vue代码 Cascader Attributes Cascader Events Cascader Methods Cascader Slots CascaderPanel Attributes CascaderPanel Events CascaderPanel Methods CascaderPanel Slo

    2024年02月21日
    浏览(41)
  • elementUI moment 年月日转时间戳 时间限制

       

    2024年02月11日
    浏览(58)
  • elementui时间日期组件右边自定义图标

    改为 首先是将左边的清除图标关闭 然后是将右边的图标设置为display:none,设置宽度,左右内边距 最后是

    2024年02月08日
    浏览(50)
  • Vue+ElementUI实现选择指定行导出Excel

    这里记录一下,今天写项目时 的一个需求,就是通过复选框选中指定行然后导出表格中选中行的Excel表格 然后这里介绍一个工具箱(模板): vue-element-admin 将它拉取后,运行就可以看到如下界面: 这里面的很多功能都已经实现了,比如上图我标记的导出Excel、Zip、PDF等。。。

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包