uView中picker限制选择时间

最新推荐文章于 2024-07-23 10:19:27 发布
最新推荐文章于 2024-07-23 10:19:27 发布
阅读量2.4k 收藏 4
点赞数 1
分类专栏： 前端 html 面试 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/drhrht/article/details/123053713
版权
本文档介绍了在uView框架中，如何限定picker组件在mode=time时仅允许选择当前日期10时以后的时间。通过修改uView源码，设置默认时间，并在选择不同月份时修复日期显示问题。
摘要由CSDN通过智能技术生成

文章目录

1.需求

uView中picker的mode=time时默认样式
在这里插入图片描述
由于项目需求，需要把时间的选择范围限制在当前日期的10时以后，不能选择以前的日期，也就是说今天是2021.9.2，不能选择2021.9.1及以前的日期，查找文档后没找到解决方法，只能修改其源码

2.解决方法

  • 找到picker的源码位置==>uview-ui==>components==>u-picker==>u-picker.vue
  • 来到429行
    在这里插入图片描述
    作者定义了设置年月日时分秒的方法，将作者指定值换成当前日期的值(new Date())
  • 更改后代码，//注释的是源码
最低0.47元/天 解锁文章
drhrht
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uView——uView 之 u-picker 选择器 时间模式 不能选择过期时间判断
qq_43201350的博客
01-22 556
uView——uView 之 u-picker 选择器 时间模式 不能选择过期时间判断
uView -- u-picker 添加时间限制
King Saj
03-06 1506
1：找到 \node_modules\uview-ui\components\u-picker\u-picker.vue 文件，新增属性如下。用户选择时间【开始时间】选择范围要小于等于【结果时间】，【结束时间】选择范围要大于等于【开始时间】
uView——uview 日期选择器 u-datetime-picker 设置最小、最大可选择时间
qq_43201350的博客
01-11 2538
uView——uview 日期选择器 u-datetime-picker 设置最小、最大可选择时间
uview - DatetimePicker 时间选择器 /时间戳转化
最新发布
声声的博客
07-23 277
【代码】uview - DatetimePicker 时间选择器 /时间戳转化。
uview中的u-picker时间模式不超过当前日期
qq_38998207的博客
03-07 833
2、找到picker的源码位置==>uview-ui==>components==>u-picker==>u-picker.vue。在watch监听里 添加调用函数 this.timeHandle()在props里新增，在init()方法中任意处添加一行。1、当前需求，要求不超过当前日期。
uView中picker限制选择时间，让过去的时间不可选
可乐伢
10-13 4974
*
uview picker组件时，mode=“time“ 时间类型，日期不允许选择当前日期之后的日期（例如出生年月）实现方法
m0_61848095的博客
09-13 1172
uview版本：1.0。
时间范围选择Demo
07-31
可以选择时间的范围，按着demo就好
UIPickerView加一个时间范围的demo
04-30
UIPickerView加一个时间范围如:(00:00-01:00)的选择项
微信小程序时间控件picker view使用详解
10-17
主要介绍了微信小程序时间控件picker view的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用uview1.0 ，uview picker组件时，mode=“time“ 时间类型，日期不允许选择当前日期之后的日期（例如出生年月）实现方法
m0_55074611的博客
08-03 1076
使用uview1.0中的picker组件，实现日期最大可选值功能，官方文档不支持处理最大月，日值，通过修改源码的方式来实现次功能。具体操作步骤有以下几点： 1、在使用u-picker 组件的页面组件上 新增传参:timeEnd="endTime" 2、在onShow 函数中给endTime中的值进行赋值 3、修改源码，新增函数 timeHandle，在该函数中处理年月日的最大显示 4、修改 timeHandle 中所调用的函数，加传参，使用原本的uview 防撞好的逻辑 5、在初始化函数中，watch中调用
iviewui DatePicker 日期选择器 限制选取时间跨度
Teemo_shape的博客
04-27 2409
需求： 当前日期 是 2022年4月27日，要求当天后的日期不可选，选中的日期跨度是4天，比如我选13号，13号前四天后四天是可选的，其余都不可选。 vue + ivewUI <DatePicker ref="datePicker" type="daterange" @on-pick="onPick" class="ivu-ml-16" place...
【uniapp】uni-datetime-picker插件支持限制选择当前或者以后时间、禁用日期区域
SunnyRun
11-16 6465
欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结*分享一个使用比较久的🪜目前官方文档没有可禁用日期的功能，因此我们要实现类似elementUI日期控件:picker-options="pickerOptions"的禁用功能，需要在官方文档的基础上修改了日期控件源代码，让其实现： 2. 实现思路 2.1 效果展示 1）在业务代码中 uni-datetime-picker 组件的页面，把 disabledDate 函数参数传递给该组件，让其子组件可接收到； 2） 两种情况
【VUE】element-ui picker 选择时间范围限制条件
灵活的小胖砸
09-16 1904
选择时间组件： <el-date-picker v-model.trim="ruleForm.messTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" >
iView 日期选择器开始时间至结束时间限制
chujian0325的博客
04-15 1563
需要考虑以下条件 开始时间和结束时间都不能大于当前时间 开始时间不能大于结束时间 html <FormItem label="起止时间"> <DatePicker type="date" v-model="searchForm.startTime" :options="startOptions" placeholder="请选择开始时间" style="width: 200px"></DatePicker> <DatePicker type="dat
u-view组件库 时间选择器u-datetime-picker 设置最小日期事件，最多到1970年1月1日，解决办法
柑橘乌云_
06-03 2619
关键的这两个属性，注意一定是number！
uview的picker 时间选择器怎么设置禁用
05-10
在uView的时间选择器中，可以通过设置 `disabled` 属性来禁用时间选择器。具体操作如下： 1. 在 `<u-picker>` 组件中设置 `disabled` 属性为一个布尔值，例如： ``` <u-picker title="请选择时间" :fields="['hour', 'minute']" :disabled="true"></u-picker> ``` 2. 通过设置 `:disabled` 的值为 `true` 或 `false` 来启用或禁用时间选择器。 注意：如果需要动态禁用时间选择器，需要通过 `v-bind` 或简写的 `:` 语法来绑定 `disabled` 属性的值，例如： ``` <template> <u-picker :disabled="isDisabled"></u-picker> </template> <script> export default { data() { return { isDisabled: true } }, methods: { toggleDisabled() { this.isDisabled = !this.isDisabled } } } </script> ``` 在上面的例子中，可以通过 `toggleDisabled` 方法来动态地切换时间选择器的禁用状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值