欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-04-25 10:10:51|栏目:vue|点击:

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

<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 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"

完美解决!

上一篇:Vue+tracking.js 实现前端人脸检测功能

栏    目:vue

下一篇:Vuex实现计数器以及列表展示效果

本文标题:ant-design-vue 时间选择器赋值默认时间的操作

本文地址:http://www.codeinn.net/misctech/108393.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有