ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作
更新時(shí)間：2020年10月27日 11:09:54 作者：芒果慕斯好甜
這篇文章主要介紹了ant-design-vue 時(shí)間選擇器賦值默認(rèn)時(shí)間的操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨過來看看吧
我就廢話不多說了，大家還是直接看代碼吧~
<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ǔ)充知識：ant-design-vue TimePicker 時(shí)間選擇框 踩坑
筆者在一次開發(fā)中用到TimePicker 時(shí)間選擇框組件。
要求是有默認(rèn)值，就是從接口中返回的數(shù)據(jù)，但是TimePicker數(shù)據(jù)在一次加載后便不會更新
簡單的說，如果在data里設(shè)置了default=null TimePicker就會就會顯示Invalid date，default=“9：00：00”，就會顯示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)知識
這篇文章主要介紹了Vue引入vuetify框架你需要知道的幾點(diǎn)知識，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了詳解vuex中mutation/action的傳參方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
vue @click與@click.native,及vue事件機(jī)制的使用分析
這篇文章主要介紹了vue @click與@click.native,及vue事件機(jī)制的使用分析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了使用Vant框架list組件遇到的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element搭建后臺小總結(jié) el-dropdown下拉功能
這篇文章主要為大家詳細(xì)介紹了vue+element搭建后臺小總結(jié)，el-dropdown下拉功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
用Vue.js在瀏覽器中實(shí)現(xiàn)裁剪圖像功能
在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片，為服務(wù)器上的存儲做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(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