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 相关文章推荐
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
JavaScript实现简单的计算器
Jan 16 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
js+css实现扇形导航效果
Aug 18 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
2009/10/11 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
2018/06/19 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python端口扫描系统实现方法
2014/11/19 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
简单介绍django提供的加密算法
2019/12/18 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
Html5定位终极解决方案
2020/02/05 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
2015年售票员工作总结
2015/04/29 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
导游词之阆中古城
2019/12/23 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android