ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作

更新時(shí)間：2020年10月27日 11:09:54 作者：芒果慕斯好甜

這篇文章主要介紹了ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨過來看看吧

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

<template>
 <div>
 <a-range-picker
   show-time
   format="YYYY/MM/DD HH:mm:ss"
   :value="[this.moment(startTime, dateFormat),this.moment(endTime, dateFormat)]" //關(guān)鍵代碼
   @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>

效果圖：

補(bǔ)充知識(shí)：ant-design-vue TimePicker 時(shí)間選擇框踩坑

筆者在一次開發(fā)中用到TimePicker 時(shí)間選擇框組件。

要求是有默認(rèn)值，就是從接口中返回的數(shù)據(jù)，但是TimePicker數(shù)據(jù)在一次加載后便不會(huì)更新

簡單的說，如果在data里設(shè)置了default=null TimePicker就會(huì)就會(huì)顯示Invalid date，default=“9：00：00”，就會(huì)顯示9：00：00

最后解決方法是data里設(shè)置了default=null，在time-picker內(nèi)做判斷 v-if="defaultstart!==null"

完美解決！

以上這篇ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)可改變購物數(shù)量的購物車
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可改變購物數(shù)量的購物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue引入vuetify框架你需要知道的幾點(diǎn)知識(shí)
這篇文章主要介紹了Vue引入vuetify框架你需要知道的幾點(diǎn)知識(shí)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
詳解vuex中mutation/action的傳參方式
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
使用Vant框架list組件遇到的坑及解決
這篇文章主要介紹了使用Vant框架list組件遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue+element搭建后臺(tái)小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺(tái)小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
用Vue.js在瀏覽器中實(shí)現(xiàn)裁剪圖像功能
在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片，為服務(wù)器上的存儲(chǔ)做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下
2019-06-06
vue分割面板封裝實(shí)現(xiàn)記錄
這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue使用jsonp抓取qq音樂數(shù)據(jù)的方法
這篇文章主要介紹了vue使用jsonp抓取qq音樂數(shù)據(jù)的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
Vue使用html2canvas實(shí)現(xiàn)截取圖片并保存
html2canvas是一個(gè)JavaScript庫,它可以將HTML元素轉(zhuǎn)換為Canvas元素本文將介紹一下Vue如何使用html2canvas實(shí)現(xiàn)截取圖片并保存功能,需要的可以參考下
2023-12-12