el的时间选择器设置当前日期之前不可选择

最新推荐文章于 2023-12-05 09:49:38 发布
最新推荐文章于 2023-12-05 09:49:38 发布
阅读量1.2k 收藏 2
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nanupup/article/details/108768025
版权

在这里插入图片描述
在工作中经常会遇到使用时间选择器的功能，有的时候需求会有当前日期之前的时间不能选择，这里使用的时el的时间选择器组件，只需要绑定:picker-options这个属性，在data里面默认就可以了 如下图
在这里插入图片描述
这里就是设置小于当前日期的置灰，不可选择

nanupup
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UView 时间选择器源代码修改，增加可选‘年’、‘年-月-日-时’的功能更
07-24
下载后直接替换原本的代码即可
基于Vue组件化的日期联动选择器功能的实现代码
10-17
总结来说，Vue组件化的日期联动选择器通过组件化思想实现了自定义的日期选择功能，它能根据年、月的选择动态调整可选的天数，并且处理了日期格式兼容性和错误状态的展示，提高了用户体验。在实际开发中，可以根据...
使用element ui日历组件实现今天之前都不能点击的功能
画龍丶的博客
07-19 3072
需求：如图，假如今天是7月18日，我们要实现今天之前的日子都不能点击，且变为灰色，今天以后的（包括下个月）都正常。之前百度了半天，都没有找到解决的方法，琢磨半天以后找到一个笨方法可以实现。 本文只讲思路和部分项目代码，实现还要靠个人手敲。 1.通过打开f12观察的dom节点，我们可以发现今天的格子是有类名的。所以我们可以从这里入手 ps: 在这里说一下一页日历中禁止非本月日期点击事件的方法: // 使不是本月的日期不可点击，不会跳转到其他月份 /deep/ .el-calendar-table {
[Vue] 设置 el-date-picker 今日之前的日期不可选
_修铁路的、的博客
06-11 1031
<el-date-picker type="month" format="yyyy/MM" :placeholder="languageList.validTime" :picker-options="validTimeOption"/>
预约型日历，当前时间之前的不允许点击
u012746918的博客
05-22 1940
wxml中代码： <view class="gradient"> <view class="box"> <view class="spaceAroundCenter"> <view class="flex-item"> <view class="item-content"> ...
element ui 日历组件禁选某些日期
Dipper_Dubhe的博客
06-13 1574
element ui 日历组件禁选某些日期
vue日期控件实现可以选择年月或者选择年月日
08-12
为了默认显示当前日期，我们可以使用`value`属性并结合`moment.js`库（Element UI推荐使用）来初始化日期： ```javascript import moment from 'moment'; data() { return { value: moment().format('YYYY-MM-DD...
Calendar一个自定义灵活的日历选择器
08-10
在IT行业中，尤其是在前端开发领域，自定义日历选择器是一种常见的需求，它能帮助用户方便地选择日期，常用于事件安排、预约系统等场景。本文将深入探讨名为"Calendar"的自定义日历选择器，它具备灵活性、精确性和...
JavaScript实现的日期控件具体代码
10-26
此外，还定义了`D`属性来存储当前日期，`el`属性来存储关联的输入元素，以及一些日期相关的辅助方法（如`_fd`和`_fc`）。 `update`方法负责更新日期显示，当用户在页面上进行交互时，这个方法会被调用以更新日期...
移动端日期选择vue组件
08-12
Vue.js社区有许多优秀的日期选择器组件库可供选择，如`vuetify`的`VDatePicker`，`element-ui`的`el-date-picker`等。这些库已经封装好了大部分功能，可以快速集成到项目中。例如，我们可以使用`element-ui`来创建一...
js日历可限制选择日期
06-09
js日历，可以控制选择日期，可以按周、月等显示，自带css样式也很好看，选择日期可以按照自己想要的模式来设置同时支持各大主流浏览器 支持的浏览器 IE 6.0+ , Firefox 2.0+ , Chrome, Opera 9.5+ , Safari 3.0+ 同时又demo可以测试
element 日期选择器中当前日期之前日期不可选
莫不静好
04-18 3088
data() { return { pickerOptions0:{ disabledDate(time){ let _now = Date.now(); return time.getTime() < _now ; } }, } ...
[【前端】element-ui的时间组件＜el-time-picker＞出现无法选择或无法滚动的解决思路
SouthNAN的博客
09-22 5832
一个Java菜鸟的前端笔记 问题描述： 时间组件<el-time-picker>无论是新增和编辑均出现无法选择或无法滚动的情况，并且在返回详情时组件是能够成功回显已保存的时间数据的，但就是无法修改 组件 <el-form-item v-if="showMore" label="营业时间" prop="rangeTime"> <el-time-picker is-range value-format="HH:mm:ss" v-mo
el-time-picker在选择开始时间后在结束时间选择器禁用开始时间之前的时间
T70H78的博客
10-21 1129
通过selectableRange限制可选时间范围 用模板字符串将开始时间拼接到时间选择范围这里 因为进行了时间格式化,将秒数拼接在后面 <el-time-picker v-model="addForm.startTime" :picker-options="{ selectableRange: '00:00:00- 23:59:59' }" format=".
VUE el-calendar非当前月不能点击
最新发布
梦翼横空的专栏
12-05 775
项目需求，非当前的月份不能点击。calendar简单应用。只需要加上css样式即可。
iview的日历控件，设置某些日期不可选
dante1987的博客
03-04 2133
<div id="app"> <date-picker type="date" :options="options4" format="yyyy/MM/dd" placeholder="选择时间" style="width: 200px" v-model="TableInfo.F_FoShiDate" @@on-change="changeFoShiTime"></...
日历calendar 组件 增加禁用功能
weixin_45004886的博客
07-15 2072
在使用el-calendar的时候,有个需求,需要把今天之前的日期给禁用掉,本以为是轻轻松松,给个禁用日期就ok的,像el-date-picker这个只需要传一个禁用的日期就ok,但是万万没想到el-calenda没有提供这个属性,是真的没有。思路是这样，我的要求是今天之前的日期，那么在组件上会不会有之前的class,只要昨天前天上个月这有个"is-pervDay",那我根据他的类名控制就行。1拿到当前的时间和当天的时间比对,小于今天的时间加上class。...
el-date-picker设置当前日期之前的日期不可选,并且日期的范围只能选择7天内的日期
weixin_38822843的博客
08-24 1483
el-date-picker选择时间范围，并且只能选择当前日期之后的七天
vue之ele中的时间组件，设置禁用的日期
weixin_47409897的博客
06-29 951
vue之ele中的时间组件，设置禁用的日期 只允许选择当月的最后一天和下月的第一天 转载于：链接: link. <template> <div class="container"> <el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions"> </el-date-pick
el-date-picker不可选择当前时间之前
07-28
根据提供的引用内容，可以使用picker-options属性和disabledDate方法来设置el-date-picker不可选择当前时间之前的日期。在picker-options中，disabledDate方法可以接收一个参数为当前日期，返回一个布尔值来表示是否禁用该日期。具体实现可以参考以下代码示例： ```html <el-date-picker type="datetime" :picker-options="forbiddenTime" value-format="yyyy-MM-dd HH:mm:ss" v-model.trim="data.time" style="width: 100%;"/> ``` ```javascript data() { return { forbiddenTime: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; }, }, } } ``` 在上述代码中，disabledDate方法中的逻辑判断是通过比较当前日期的毫秒数与Date.now() - 8.64e7的大小来确定是否禁用该日期。如果当前日期的毫秒数小于Date.now() - 8.64e7，则返回true，表示禁用该日期；否则返回false，表示可选该日期。这样就可以实现el-date-picker不可选择当前时间之前的日期。\[2\]\[3\] #### 引用[.reference_title] - *1* [elementui时间/日期选择器选择禁用当前之前(之后)时间](https://blog.csdn.net/weixin_42878641/article/details/129026271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [【Element UI】日期选择器el-date-picker 默认选中当前日期==＞ 不可选当日之前的日期](https://blog.csdn.net/Sabrina_cc/article/details/125854878)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [element ui的组件el-date-picker 禁止选择当前日期之前的日期](https://blog.csdn.net/cc6_66/article/details/125545466)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值