ant-design-vue TimePicker 时间选择框 踩坑

最新推荐文章于 2024-05-21 15:04:37 发布
最新推荐文章于 2024-05-21 15:04:37 发布
阅读量7k 收藏 2
点赞数 1
文章标签： vue ant vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mlxgzz/article/details/104786004
版权

笔者在一次开发中用到TimePicker 时间选择框组件。

要求是有默认值，就是从接口中返回的数据，但是TimePicker数据在一次加载后便不会更新

简单的说，如果在data里设置了default=null TimePicker就会就会显示Invalid date，default=“9：00：00”，就会显示9：00：00

最后解决方法是data里设置了default=null，在time-picker内做判断 v-if="defaultstart!==null"

完美解决！

邋遢大王穿US11
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ant-design-vue离线文档
09-23
vue ant design的离线文档， 解压后打开目录 npm install 运行 npm start 启动 默认项目地址为 localhost:3000
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
ant design vue a-date-picker、a-time-picker日期时间选择器已有数据，但校验提示信息仍然显示
tmd
12-17 1998
planStartTime: [{required: true, message: ‘请选择开始时间’, trigger: ‘blur’}], 该字段虽然已经添加了数据，但是校验仍然显示，原因是在选择校验的时候使用blur，若改为change，即planStartTime: [{required: true, message: ‘请选择计划开始时间’, trigger: ‘change’}],问题即可解决 ...
Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
最新发布
weixin_43962877的博客
05-21 287
【代码】Ant Design a-time-picker 时间回显问题 回显为Invalid date(使用moment来处理)
antd的时间框空了会显示Invalid
孜然卷的博客
10-27 1266
antd的时间框空了会显示Invalid
React-antd日期选择框日期初始化问题(invalid date)解决
WebView
04-09 1万+
1、 2、在使用日期选择框的时候，当我们没有进行初始化，并格式化日期时，会出现以下情况 3、解决方法: 在state初始化时给予日期值为undefined 在日期选择框中进行判断 <DatePicker style={{ width: '110px' }} placeholder="开始日...
antdesign的时间date出现Invalid
m0_45827438的博客
08-10 1207
【代码】antdesign的时间date出现Invalid。
el-date-picker默认时间的坑（无法选择日期，点日期）
qq_43378083的博客
08-08 1597
重点在 :default-time="['00:00:00', '23:59:59']"，一定要写全，不管你想要的类型是什么，默认复制的时候 时分秒都要写，不写就会报错。错误写法：:default-time="['00:00', '23:59']"
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
nuxt-ant-design-vue
05-08
@ nuxtjs-extra / ant-design-vue 适用于Ant Design Vue的Nuxt模块设置向项目添加依赖项yarn add @nuxtjs-extra/ant-design-vue @nuxt/components # or npm install @nuxtjs-extra/ant-design-vue 如果您使用...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
English | 蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： ...git clone https://github.com/vueComponent/ant-
safari浏览器使用new Date（）输出结果为Invalid Date
sanrenxingqg的博客
04-19 1233
背景： 使用el-date-picker组件进行时间选择，展示为yyyy-MM-dd格式，但是需要给后台传的数据格式为yyyy-MM-dd HH:mm:ss:000，所以需要对日期格式进行处理，后端索要数据为结束日期的下一天的00时00分00秒 所以我所用的方法是： console.log('this.ruleForm.date[1]', this.ruleForm.date[1]) //this.ruleForm.date[1] 2021-4-19 let end_time =
ntd-desgin-vue中的时间插件默认值显示Invalid date 解决办法
w161513820的博客
09-18 4187
对于ant-design的一些问题我早已经见怪不怪了，但是对下班已经遥遥在望的时候，这个问题给了我当头一棒。第一反应这是啥玩儿？ 首先看vue的生命周期当中难道是没赋值嘛，看了下没问题，然后直接去data当中赋值，发现并没有出现问题。在mounted看了下数据，分析了一下可能是先判断了data有没有数据，如果没有数据就导致报错了。解决方法就是加一个v-if判断一下就行了 这个问题就解决了，下班 ...
el-date-picker时间选择器修改时间无效
找师父的小白的博客
12-15 9326
el-date-picker时间选择器修改时间无效 前言 最近项目当中需要编辑时间的需求，同事小姐姐在修改的时候发现值已经改变，但是页面并没有更新，问了我，我也是第一次遇见这个问题 <el-date-picker v-model="value1" type="monthrange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker> 经过我一番百
ElementUI el-time-picker DatePicker 日期选择器 显示到分钟不显示秒
热门推荐
qinkaiyuan94的博客
01-12 4万+
format是格式化显示出来的样子，HH:mm只显示小时和分钟
elementUI日期选择时间器el-date-picker设置default-time无效
Y7000也拯救不了我的博客
09-22 1万+
项目场景： 在使用elementUI日期选择时间器el-date-picker 问题描述： 设置default-time无效，导致不能按照范围选择时选中日期所使用的当日内具体时刻。 <el-form-item prop="createDate" label="创建时间"> <el-date-picker v-model="searchForm.createDate"
el-time-picker组件初次不能使用，设置default-time无效的问题解决！
qq_40608283的博客
05-13 3835
组件的坑，费半天劲。 <el-time-picker is-range v-model="value2" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" .
关于element DatePicker 日期选择器为什么赋值不成功的解决办法
如影随风
11-08 2万+
最近在使用 DatePicker 日期选择器时，发现再次给DatePicker上的model赋值出现不成功的情况，但是一开始进入页面的时候在created中调用方法却能够赋值成功，这是为什么呢？疑问油然而生，经过浏览器后台打印，发现model上是有值并且是正确，这个时候我便想到了 this.$set( ) 函数，这个方法专治数据视图不同步更新问题，使用该方法后问题便轻松解决。关于this.$set...
ant-design-vue3日期选择框
08-10
ant-design-vue3日期选择框可以通过DatePicker组件来实现。根据引用提供的信息，可以根据需求选择单天时间选择或多天时间段选择。对于单天时间选择，可以通过设置不同的限制条件来控制可选日期的范围，比如只能选明天及之后的日期、只能选今天及之后的日期、只能选昨天及之前的日期、或者只能选今天及之前的日期。对于多天时间段选择，可以选择周和月作为时间单位。根据引用和引用提供的配置示例，可以引入ant-design-vue组件和样式，并在需要的地方使用相关组件，如DatePicker组件。这样就可以在ant-design-vue3项目中使用日期选择框了。123 #### 引用[.reference_title] - *1* [ant-design-vue中DatePicker 日期选择框（禁用部分时间和显示设置）](https://blog.csdn.net/pipizhou16/article/details/125502922)[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^v92^chatsearchT0_1"}} ] [.reference_item] - *2* *3* [nuxt.js-ant-design-vue配置踩坑日记](https://blog.csdn.net/weixin_42232156/article/details/126140218)[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^v92^chatsearchT0_1"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值