解决使用vant组件库中van-calendar日历不能回显接口返回的日期问题

最新推荐文章于 2024-05-08 15:26:40 发布
最新推荐文章于 2024-05-08 15:26:40 发布
阅读量805 收藏
点赞数
文章标签： 前端 vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hunantai/article/details/133138127
版权

接口返回的日期格式为年-月-日

点击calendar组件发现日期还停留在当前日期，而没有回显到接口返回的那一天

查看官网api发现设置的min-date最小日期为今天

所以，将代码中的最小日期修改为1990-01-01后，在mounted中重新修改组件的值就可以了

给van-calendar设置ref，通过this.$refs.设置的值(接口返回的日期)就ok啦！！！！！！！

果酱小米粥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vant组件库van-datetime-picker组件无法只展示年份（解决返回1970）
zhuang_li_quan的博客
08-27 2237
由于该组件无法只选择年份，不符合需求，所以更改其源码。 1、找到修改代码源码路径：node_modules=>vant=>es=>datetime-picker=>DatePicker.js 2、插入代码，如图所示 case 'year': result = result.slice(0, 1); break 3、修改代码，如图所示 month = type === 'year' ? 1 : getValue('month'); 4、效果如下 ..
vanillaJS-calendar:JavaScript练习，adaptipe布局，使用Date（）类
05-26
日历（宠物项目） 任务：创建当月的日历，例如： 说明：网格或flex，而不是表格，将屏幕调整为移动版本时，宽度应适合一天（最好是不必要），应使用js创建，而不应在html中写30次（我们使用循环）和createElement方法） 常规功能：单击任意一天的任何活动的日历跟踪器，就可以编辑当天的文本a）使用contenteditable属性，b）使用委派，每天不挂断单独的处理程序更改单元格中的内容后，以默认颜色突出显示（我们使用CSS和类，而不是直接使用颜色），最多显示10个字符，但所有文本均保存到单元格的自定义属性data-content中；当悬停在一天中时，完整的消息将显示在月份和星期几之间的小节（奖励）中，右键单击应显示更改单元格颜色的上下文菜单，方法是单击颜色，即单元格颜色更改为相应的 通过按t键，应该在顶部显示所花费的小时数（我们假设用户在单元格中跟踪活动中所花费的小时数）
van-calendar 实现移动端日历效果
weixin_49203377的博客
09-15 280
van-calendar实现移动端日历效果
vant组件中日期选择器的修改
weixin_43972428的博客
04-07 526
今天对vant组件中的van-calendar通过插槽方式，丰富功能。2.JavaScript部分。可通过《》转换年月。1.view层的代码。
vant2 (van-calendar) 日历选择器 首次打开空白页的问题
weixin_71280597的博客
01-18 570
vant-
vue移动端项目vant组件库之calendar
笑望灬星辰
02-23 2896
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
van-calendar 自定义日期上方的提示信息的两种方法
xiao_ai123的博客
05-27 2149
van-calendar 自定义日期上方的提示信息的两种方法
记录微信小程序使用vant webapp Calendar 日历 可选日期数字不显示但是选择后可以显示，不可选日期也能显示问题
Bald_ness的博客
10-15 1666
今天小程序使用了vant webapp 的Calendar组件发现可选日期数字不显示，如下图 所有功能都好好的选择后也可以正常显示不可选日期也能显示只有可选的日期的数字显示不出来， 后经排查发现可选日期缺少了color属性导致显示不出来。给.van-calendar__day加上color属性就可以了 .van-calendar__day { color: #000; } 问题解决 应该是和之前的样式冲突导致的，试过在别的页面使用就没这个问题 ...
【项目_03】日历的回显、搭建热门精选、下拉加载更多、搜索框搭建 | 基于Vue3全家桶
森姐姐的博客
12-04 883
日历的回显、搭建热门精选、下拉加载更多、搜索框搭建 | 基于Vue3全家桶
微信小程序+vant-weapp，日历组件多个时间日期回显
weixin_56480344的博客
07-06 1998
日历组件多个时间日期回显不成功
vant组件关于自定义日期范围van-calendar设置无效
weixin_52102646的博客
05-26 1124
vue项目中组件的使用代码和原文档一样，但是就是不生效，显示min-data与max-data未定义。直接给定变量值然后生效了，真的是奇葩。
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
11-19
假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题，重新下载一个最新的vant就可以了，现在是2.6.0版本 好，接下来继续 在...
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vant title-active-color与title-inactive-color不生效问题
01-18
假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有register,这个时候很有可能是你的vant插件版本有问题，重新下载一个最新的vant就可以了，现在是2.6.0版本 好，接下来继续 在...
解决vant中 tab栏遇到的坑 van-tabs
01-18
话不多说，先看下问题描述： 我的需求：（和头条的tab栏类似 ，单击查看头条tab栏） 点击tab栏，下方展示出来当前tab栏下的内容列表（A页面），点击列表进入详情内容（B页面），但是返回（A页面）的时候，需要显示...
Vue项目解决van-calendar 打开下拉框显示空白（白色），需滑动一下屏幕，才可正常显示
wocwin的博客
11-30 1095
Vue项目解决van-calendar 显示白色空白，需滑动一下屏幕，才可正常显示
微信小程序 页面配置文件
Vue1024的博客
10-20 756
微信小程序 页面配置 // pages/demo01/demo01.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */
Vant组件库封装可翻页日历组件
前端小记
02-15 3261
Vant 是一个轻量、可靠的移动端组件库，但是其中的日历组件存在官方bug，2.12.54版本这个bug依旧存在。怎样在修改bug的同时封装一个可以自主使用按钮翻页的组件呢
小程序vant组件中，日期选择器van-calendar选择历史日期
最新发布
coinisi_li的博客
05-08 255
组件默认是选择当日之后的日期，加上限制最小日期就好了 :min-date="new Date(1990, 0, 1)"。
vue3+vant+a-date-picker+回显问题
06-03
2. 接下来，在使用 a-date-picker 组件时，需要将选中的日期保存在一个变量中，然后在页面中回显这个变量的值： ```html <van-date-picker v-model="selectedDate" type="date" /> export default { data() {...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值