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自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
Three.js基础学习教程
Nov 16 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
Vue源码解析之数组变异的实现
Dec 04 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的十大要点(上)
2009/02/04 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
python client使用http post 到server端的代码
2013/02/10 Python
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python实现内存监控系统
2021/03/07 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Django实现文件上传和下载功能
2019/10/06 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
python输入中文的实例方法
2020/09/14 Python
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
工地安全生产标语
2014/06/06 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
假期安全教育广播稿
2014/10/04 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android
Vue router配置与使用分析讲解
2022/12/24 Vue.js