vant使用datetime-picker组件设置maxDate和minDate遇到的坑

最新推荐文章于 2024-05-22 11:26:23 发布
最新推荐文章于 2024-05-22 11:26:23 发布
阅读量5.6k 收藏 3
点赞数 2
分类专栏： 前端ui组件库使用 文章标签： vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43893477/article/details/120455860
版权

需求

使用vant使用datetime-picker组件实现选择日期范围

  1. 开始时间不能大于结束时间
  2. .时间跨度不能大于180天
    vant使用datetime-picker组件

问题描述

分别设置开始时间及结束时间的maxDate和minDate
在这里插入图片描述
在这里插入图片描述
点击选择了开始时间之后，在点击选择结束时间页面卡着不动了

原因

datetime-picker组件中绑定的min-date和max-date不可以是动态的，只能绑定一个固定的值，否则就会导致页面卡死

解决方法

  1. 组件中只设置一个max-date，在data中定义maxDate: new Date()
    max-date
  2. 在确定选择日期函数中判断： 开始时间不能大于结束时间、时间跨度不能大于180天
    在这里插入图片描述
    在这里插入图片描述
    ps:欢迎有更好解决方法的小伙伴一起讨论！！！
遇事皆问春风
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vant ui的DatetimePicker组件导致页面卡死
BabyGod_Cheney的博客
11-07 3156
做项目的过程中使用到了vant ui里面的DatetimePicker时间选择器，导致页面卡死，究其原因原来是这个组件中绑定的min-date和max-date，不可以是一个实时的date对象，应该绑定的是一个存着date对象的变量 错误示例： <van-datetime-picker v-model="currentDate" type="date" @confirm="onVisaExpirationDateConfirm" :min-date="new Date()" :ma
van的时间选择控件van-datetime-picker的坑
StoneVivi的博客
04-01 9982
van的时间选择控件van-datetime-picker的坑 以type='date’的van-datetime-picker为例： <vant-date-picker v-model="value4" type="date" range-separator="至" start-placeholder="开始日期" end...
vue-cli使用vant-ui时间选择器DatetimePicker和选中的时间修改以及开始时间不能超过结束时间实例
m0_46348368的博客
08-27 4252
element-ui的时间选择器一条龙服务引入组件就可以实现时间选择以及选中时间的渲染，而vant-ui官方文档虽然有关于时间选择器的使用，但是发现只能引入选择时间的组件，什么功能都没有实现，所有的逻辑都要靠自己写，最近刚入门做此功能的实现发现很少能找到相关完整内容的博客，所以想写一篇完整的功能实现，小白也能轻松get~ 功能模块初始化显示当前的时间 页面效果如下 datetimePicker放在popup组件里使用，点击事件显示底部弹出层 组件的引入： import { Popup } from 'va
微信小程序使用vant组件DatetimePicker 时间选择时，在Android手机上出现延迟与与乱跳的问题
qq_40101217的博客
06-03 5720
最近在做微信小程序的时间选择功能时，用到了vant组件。vant的DatetimePicker，在开发工具上功能是正常的，实机测试用了苹果测试也是正常的，但是用Android手机测试时，却出现了问题。
vant-DatetimePicker 时间选择的使用
最新发布
aaa123aaasqw的博客
05-22 950
2,在UserEdit.vue页面使用, 定义相关变量。3,点击单元格, 弹出时间选择组件。4,绑定事件, 实现功能。
van-datetime-picker 设置默认时间
feifei0987654321的博客
08-26 8128
在van-datetime-picker中用:value或者v-model绑定上值，注意此时默认的值必须是new Date()，即Fri Aug 26 2022 10:14:42 GMT+0800 (中国标准时间)，否则点击下拉的时候是不会展示默认值的！！不同的时间组件不能绑定同一个值谨以此记录一下，ε=(´ο｀*)))唉又是在犯蠢的一天，(ｷ｀ﾟДﾟ´)!!...
Vue + Vant DatetimePicker 日期选择 常见的日期限制（只允许选择当前月，整月选择）
射手男很懒的博客
09-22 8041
Vue + Vant DatetimePicker 日期选择 常见的日期限制 安装Moment.js（Moment.js JavaScript 日期处理类库 http://momentjs.cn/） npm install moment --save # npm yarn add moment # Yarn <van-datetime-picker class="datePick" ...
组件（移动端）--时间区间
qq_53208184的博客
08-16 503
组件（移动端）--时间区间
Vant Weapp DatetimePicker 微信小程序 时间选择 设置只能选择当天到前一天的时间限制
meiwan123的博客
01-07 9507
Vant Weapp DatetimePicker 微信小程序 时间选择 设置只能选择当天到前一天的时间限制 微信小程序 我的项目 需要设置时间 为 选择当天和前一天12：00以后的时间。那么如何设置呢？文档里面有一个最大值和最小值 这是示例代码 选择完整时间 value 为时间戳 <van-datetime-picker type="datetime" value="{{ c...
vant组件关于自定义日期范围van-calendar设置无效
weixin_52102646的博客
05-26 1184
vue项目中组件的使用代码和原文档一样，但是就是不生效，显示min-data与max-data未定义。直接给定变量值然后生效了，真的是奇葩。
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
01-18
在移动端开发中使用到了Mint-ui组件库，其中有两个组件Popup组件和Datetime Picker存在滚动性穿透问题，官方文档最新版并没有解决这个问题。 现象还原 官方地址 手机扫码查看demo，查看两个组件Popup组件和Datetime...
使用Vant完成DatetimePicker 日期的选择器操作
01-21
效果展示： 代码展示： <div id=date_time_picker> ... <van v-model=timeValue placeholder=选择的日期结果> <van v-model=show position=bottom xss=removed> ...van-datetime-picker v-model=c
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
Vant picker 多级联动操作
01-18
度娘也没有找到，花了大半天爬坑试错。 搭配弹出层使用 选择城市 value=station click=showPicker> <van v-model=showPicker position=bottom> <van-picker show-toolbar :columns=columns @cancel=...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
bootstrap-datepicker 时间选择控件属性和方法
热门推荐
草木红的博客
08-04 1万+
官方文档：https://getdatepicker.com/4/ moment.js地址：https://github.com/moment/moment/tree/master 需要用到的js和css（按顺序引用）： bootstrap.min.css bootstrap-datetimepicker.css jquery.js moment-with-locales.js (moment.js地址中可以获取) zh-cn.js （属于moment-with-locales.js的一部分） boo
vue使用vant组件制作时间选择（年月）
weixin_65263313的博客
07-25 3694
maxDatenewDate(2025,12,31),//结束时间范围。minDatenewDate(),//开始时间范围。userListForm"",//显示内容。年、月、日、时、分、秒-----以此内推。placeholder="请选择时间"returnval+"年";returnval+"月";/*触发的事件*//*格式化时间*//*显示年月*/.........
HTML_element 、 vant 时间区间设置，日期选择限制
小歪博客
09-28 1207
element （PC端）vant （手机端）
mysql date连接,MYSQL在连接语句中选择MAX Date
weixin_39970994的博客
02-07 137
I'm trying to return a record number's historic locationsWhat I have is:SELECT l.location, t.transaction_id, t.date_modifiedFROM transactions as tINNER JOIN (SELECTt1.received_id, t1.transaction_id, t...
vue2 van-datetime-picker和van-popup 实现时间选择器
06-07
要在Vue2中使用Vant实现时间选择器，需要先安装Vant组件库，然后在Vue组件中引入相关的时间选择器组件。 首先，在命令行中使用以下命令安装Vant： ``` npm install vant@next -S ``` 然后在Vue组件中引入相关的时间选择器组件，例如： ```vue <template> <div> <van-popup v-model="showPicker" position="bottom"> <van-datetime-picker ref="picker" type="datetime" :min-date="minDate" :max-date="maxDate" :value="currentDate" @confirm="onConfirm" /> </van-popup> <van-button type="primary" @click="showPicker = true">选择时间</van-button> </div> </template> <script> export default { data() { return { showPicker: false, currentDate: new Date(), minDate: new Date(2010, 0, 1), maxDate: new Date(2022, 11, 31), }; }, methods: { onConfirm(value) { this.currentDate = value; this.showPicker = false; }, }, }; </script> ``` 在上面的代码中，我们使用了Vant的`van-popup`组件来实现时间选择器的弹出框。我们设置了`position`为`bottom`，表示弹出框从底部弹出。我们还使用了`v-model`来控制弹出框的显示与隐藏。 在弹出框中，我们使用了`van-datetime-picker`组件来实现时间选择器。我们设置了组件的`type`为`datetime`，表示选择的是日期和时间。我们还设置了`min-date`和`max-date`来限制可选的时间范围。我们使用了`value`来设置当前的时间值。当用户点击确认按钮时，会触发`@confirm`事件，我们在`onConfirm`方法中将选择的时间值赋给`currentDate`，并将弹出框隐藏起来。 最后，我们在页面上放置了一个按钮，当用户点击该按钮时，弹出框会从底部弹出，让用户可以选择时间。 以上就是使用Vant实现时间选择器的基本步骤。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值