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 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
vuex与组件联合使用的方法
May 10 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
面试题:react和vue的区别分析
Apr 08 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
解决vue中的无限循环问题
Jul 27 Javascript
JavaScript实例 ODO List分析
Jan 22 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 foreach、while性能比较
2009/10/15 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python缩进和冒号详解
2016/06/01 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
python文件读写代码实例
2019/10/21 Python
python django中8000端口被占用的解决
2019/12/17 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
详解python内置模块urllib
2020/09/09 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
"序列点" 是什么
2016/07/29 面试题
编辑找工作求职信范文
2013/12/16 职场文书
饲料采购员岗位职责
2013/12/19 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python