ant-design-vue 时间选择器赋值默认时间的操作


Posted in Javascript onOctober 27, 2020

我就废话不多说了,大家还是直接看代码吧~

<template>
 <div>
 <a-range-picker
   show-time
   format="YYYY/MM/DD HH:mm:ss"
   :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //关键代码
   @change="onChangeTime"
   ></a-range-picker>
  </div>
</template>
<script>
import Moment from 'moment'
export default {
 data () {
  this.dateFormat = 'YYYY/MM/DD HH:mm:ss'
  return {
   startTime: '2019-07-12 16:00:00',
   endTime: '2019-07-13 04:00:00',
  }
 }
 methods: {
  onChangeTime (dates, dateStrings) {
  console.log(dates)
  console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
 },
 }
}
</script>

效果图:

ant-design-vue 时间选择器赋值默认时间的操作

补充知识:ant-design-vue TimePicker 时间选择框 踩坑

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

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

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

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

完美解决!

以上这篇ant-design-vue 时间选择器赋值默认时间的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jQuery中 常用的选择器介绍
Apr 16 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 Javascript
JavaScript Date 知识浅析
Jan 29 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 #Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 #Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 #Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 #Javascript
js实现自定义滚动条的示例
Oct 27 #Javascript
vue移动端下拉刷新和上滑加载
Oct 27 #Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 #Javascript
You might like
PHP开发入门教程之面向对象
2006/12/05 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
让Firefox支持event对象实现代码
2009/11/07 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Python中分数的相关使用教程
2015/03/30 Python
Python中用max()方法求最大值的介绍
2015/05/15 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python进程池Pool应用实例分析
2019/11/27 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
异步传递消息系统的作用
2016/05/01 面试题
毕业生教师求职信
2013/10/20 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
党员一句话承诺大全
2014/03/28 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis