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获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
jquery操作angularjs对象
Jun 26 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
Three.js学习之网格
Aug 10 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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提高网站效率的技巧
2015/09/29 PHP
php数据访问之查询关键字
2016/05/09 PHP
一个简单的php路由类
2016/05/29 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js jquery获取随机生成id的服务器控件的三种方法
2013/07/11 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript常用方法汇总
2014/12/02 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
python支付宝支付示例详解
2019/08/22 Python
python Pillow图像处理方法汇总
2019/10/16 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
python解包用法详解
2021/02/17 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
写给爸爸的道歉信
2014/01/15 职场文书
英语系毕业生求职信
2014/07/13 职场文书
校园运动会广播稿
2014/10/06 职场文书
保护校园环境倡议书
2015/04/28 职场文书
《花钟》教学反思
2016/02/17 职场文书
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android