我就廢話不多說了，大家還是直接看程式碼吧~

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

完美解決！

以上這篇ant-design-vue 時間選擇器賦值預設時間的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。