vant的日历组件，在iPhonex上可选日期空白

最新推荐文章于 2024-03-12 17:21:22 发布
最新推荐文章于 2024-03-12 17:21:22 发布
阅读量2.3k 收藏 4
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42398301/article/details/107533148
版权

需求

一个列表页面需要用到日期筛选，用的是vant组件Calendar的选择日期区间

bug情况

进入页面，给了组件默认值，当点开日历时，可选日期空白，需要先向下拉一下，可选日期才会正常显示
在这里插入图片描述

解决方案

给日历控件设置高度，默认高度为页面的80%,我把它改为90%，成功解决bug

.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top{
    height: 90% !important;
  }

不要忘记：!important 哦~~，否则更改组件样式不会生效的

正常效果

在这里插入图片描述

manda Liu
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue学习之关于element日历calendar组件中上月，今天，下月的显示
追梦i
10-08 3891
今天学习写日历的模板，不过element日历组件官方文档提供的资料较少，所以试着写了个简单的，以后再深入学习。 显示效果图： 本月： 上月： 下月： 下方是源码 <template> <div> <el-calendar v-model="value" id="calendar"> <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法--> <template slot="dateCell" slot-scope="
Vant移动端组件库-其他
06-11
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 特性： 1、60+ 高质量组件 2、95% 单元测试覆盖率 3、完善的中英文文档和示例 4、支持按需引入 5、支持主题定制 6、支持国际化 7、支持 TS 8、支持 SSR 建议搭配 webpack，babel 使用 Vant，这样可以使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-plugin-import，通过 babel 插件使用 Vant，可以优化代码体积，提高前端性能。 轻量化 作为移动端组件库，Vant 一直将轻量化作为核心开发理念。为了平衡日益丰富的功能和轻量化之间的矛盾关系，Vant 内部使用了很多的优化方式，包括支持组件按需加载、公共模块复用、组件编译流程优化等。 在应用一系列的优化手段之后，目前 Vant 的组件平均体积仅有 8.8KB，Uglify + Gzip 后约 1KB。 丰富实用的业务组件 Vant 不只是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增加了许多移动商城内常用的业务组件。类似于地址管理、优惠券、省市县选择等。
微信小程序vant弹窗组件的实现方式
10-15
主要介绍了小程序vant弹窗组件的实现方式，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vant框架 日历组件格式化
最新发布
cc蒲公英的博客
03-12 412
vant框架 日历组件格式化
Vant-UI中的组件，DatePicker在IOS系统中出现不兼容情况，不显示日期？
lzl770880的博客
09-20 561
近期在开一个小功能的时候，用到了DatePicker组件，编写完代码，运行在测试环境中，安卓与IOS系统完美运行，然后就直接上线了，但是过了几天，就收到客户反馈，苹果手机没有显示日期出来。接到反馈，就是看了代码都没问题，就上了官网查看，看到了有提示，原因为：如图所以。将时间格式更改为"yyyy/MM/dd"即可，解决这个问题。
使用vue3对vant的日历组件进行改造能选上一年下一年上一个月下一个月
qq_48812264的博客
10-20 978
参考vue2其他博客封装 vue2封装连接。
Vant 日历组件改造，增加农历，左右点击按钮上一个月，下一个月
liubangbo的专栏
11-30 3265
到2023年2月份显示错误了， 因为2023年2月份有28天，我们传入的天数是30天，超出了2月份最大天数，所以出错了。注意：记得安装获取农历的一个插件 npm i js-calendar-converter。在网上找了一个vant 日历改造的文章。
Calendar View
03-16
Calendar View介绍： 实现日历视图，可以点击选择某个日期，可以上下滑动切换月份。
vant Calendar组件，显示单个月份，可切换月份，展开与收起显示日期功能
weixin_46687032的博客
08-24 7831
vue3+ts使用vant的Calendar日历组件，实现显示单个月份，并且切换月份的功能。还可收起日历（只显示选中日期所在的星期数据）或者展开日历（显示整个月数据）
vant 时间选择器在ios打开空白问题
chongyang466的博客
12-01 2051
在ios中使用vant的时间日期选择器显示空白： 在创建 Date 对象时不能使用new Date(‘2020-01-01’)，iOS 不支持以中划线这种格式，正确写法是new Date(‘2020/01/01’)
【Vant Weapp】van-calendar 日历
joanmelon的博客
11-10 2736
将整个激活状态的的红色改成蓝色color="#4c66da" 通过show-confirm="{{ false }}"不展示默认的确定按钮。 利用官方文档的中的slots自定义底部区域的内容 通过onConfirm拿到拖拽后的日期，然后对他进行格式化，拿到我们需要的时间格式。 通过onConfirmAll 关闭日历，这个时候通过上一步已经拿到时间值。如果取消的话，就清空所有的值，default默认值也要删除哦。 ​
【原生小程序】【vant】年月日日期优化
weixin_44899940的博客
07-04 1061
【原生小程序】【vant】年月日日期优化
vue vant Area组件使用详解
10-15
主要介绍了vue vant Area组件使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
日历表点击切换月份
m0_73846290的博客
07-05 365
{ name: '少儿积木', time: '14:00-16:00', month: '8', day: '3', year: '2023' },{ name: '少儿积木', time: '14:00-16:00', month: '8', day: '3', year: '2023' },{ name: '少儿积木', time: '14:00-16:00', month: '8', day: '3', year: '2023' },
vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动
疑问 搜索 动手 解决 记录
07-08 3665
直接上成品 代码 <template> <div class="be-on-duty"> <!--nav--> <van-nav-bar title="值班" left-text="返回" class="nav" :fixed="true"> <template #left> <i class="icon-home" @click="goHome()"></i>
小程序基于vant calendar 修改成横向切换月份，点击左右两侧改变月份,并在需要的日期上加上标注
qq_44782585的博客
11-21 3447
主要的思路就是，将vant的日历控件设置成平铺，然后将minDate和maxDate分别设置成当前月的第一天和最后一天。这样日历区域就只会显示一个月的内容，然后再自己加两个按钮，分别在点击事件中去替换minDate和maxDate的值，产生是点击切换月份的效果。日历上特殊日期的标注则通过formatter函数来控制
vue移动端项目vant组件库之calendar
笑望灬星辰
02-23 2855
vue移动端项目vant组件库之calendar <template> <div> <h3>选择单个日期</h3> <van-cell title="选择单个日期" :value="date" @click="show = true" is-link /> <van-calendar v-model="show" @confirm="onConfirm" /> <h3>选择日期区间&lt
vant2 (van-calendar) 日历选择器 首次打开空白页的问题
weixin_71280597的博客
01-18 444
vant-
vant日历组件禁选今日之后的日期
07-27
对于 Vant 日历组件，要禁选今日之后的日期，可以使用 `min-date` 属性来设置最小可选日期。具体步骤如下： 1. 在使用 Vant 日历组件的地方，引入 `DatetimePicker` 组件： ```javascript import { DatetimePicker } from 'vant'; ``` 2. 在模板中使用 `DatetimePicker` 组件，并设置 `min-date` 属性为当前日期： ```html <template> <DatetimePicker v-model="date" min-date="today"></DatetimePicker> </template> ``` 3. 在组件的 `data` 中定义 `date` 属性，并使用 `new Date()` 方法获取当前日期： ```javascript export default { data() { return { date: new Date(), }; }, }; ``` 这样配置后，用户将无法选择今日之后的日期。需要注意的是，这种方式只是在用户界面上禁用了今日之后的日期，如果用户手动修改日期值，仍然需要在后端进行验证处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值