mint-ui 時(shí)間插件使用及獲取選擇值的方法
更新時(shí)間：2018年02月09日 10:56:37 作者：Thekingyu
下面小編就為大家分享一篇mint-ui 時(shí)間插件使用及獲取選擇值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
<div > {{pickerValue}}</div>
<mt-datetime-picker
ref="picker" 每一個(gè)都要填上這一條open
type="time"
@confirm="handleConfirm" 設(shè)置點(diǎn)擊確定
v-model="pickerValue">
</mt-datetime-picker>
data () {
return {
pickerValue:null, 定義
methods:{
openPicker() {
this.$refs.picker.open();設(shè)置開(kāi)始
},
handleConfirm(){ console.log(this.pickerValue) ;獲取值},
轉(zhuǎn)換小時(shí)
formatDate(date) {
const y = date.getFullYear()
let m = date.getMonth() + 1
m = m < 10 ? '0' + m : m
let d = date.getDate()
d = d < 10 ? ('0' + d) : d
return y + ' ' + m + ' ' + d
},
handleConfirm(){
let a = this.pickerValue
// console.log(a.split(" ")) ;
this.zheng=this.formatDate(this.$refs.picker.value)
console.log(this.formatDate(this.$refs.picker.value))
// console.log(this.value) ;
},
設(shè)置當(dāng)前日期為初始日期
<mt-datetime-picker :startDate="startDate"</mt-datetime-picker>
data(){
return{
startDate: new Date(),
}
}
設(shè)置默認(rèn)值
this.zheng=new Date().getFullYear()+'年'+new Date().getMonth()+1+'月'+new Date().getDate()+'日'
以上這篇mint-ui 時(shí)間插件使用及獲取選擇值的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大縮小拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
這篇文章主要介紹了Vue解決跨域問(wèn)題常見(jiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue出現(xiàn)跨域問(wèn)題的原因,以及常見(jiàn)解決方案與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-06-06
Vue頁(yè)面反復(fù)刷新的常見(jiàn)問(wèn)題及解決方案
Vue.js 是一個(gè)流行的前端框架,旨在通過(guò)其響應(yīng)式的數(shù)據(jù)綁定和組件化的開(kāi)發(fā)模式簡(jiǎn)化開(kāi)發(fā),然而,在開(kāi)發(fā) Vue.js 應(yīng)用時(shí),頁(yè)面反復(fù)刷新的問(wèn)題可能會(huì)對(duì)用戶體驗(yàn)和開(kāi)發(fā)效率產(chǎn)生負(fù)面影響,本文將深入探討 Vue 頁(yè)面反復(fù)刷新的常見(jiàn)原因,并提供詳細(xì)的解決方案2024-09-09
一篇文章教你簡(jiǎn)單使用Vue的watch偵聽(tīng)器
這篇文章主要為大家介紹了Vue watch偵聽(tīng)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12
解決Vue打包后訪問(wèn)圖片/圖標(biāo)不顯示的問(wèn)題
這篇文章主要介紹了 解決Vue打包后訪問(wèn)圖片/圖標(biāo)不顯示的問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考解決價(jià)值,需要的朋友可以參考下2019-07-07
Vue/React子組件實(shí)例暴露方法(TypeScript)
最近幾個(gè)月都在用TS開(kāi)發(fā)各種項(xiàng)目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫(xiě)法，對(duì)vue?react組件暴露方法相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2022-11-11
vue動(dòng)態(tài)路由實(shí)現(xiàn)多級(jí)嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會(huì)碰到多層嵌套的組件組合而成，比如我們常見(jiàn)的面包屑導(dǎo)航，下面這篇文章就來(lái)給大家介紹關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由多級(jí)嵌套面包屑的思路與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-08-08
VUE登錄注冊(cè)頁(yè)面完整代碼(直接復(fù)制)
這篇文章主要給大家介紹了關(guān)于VUE登錄注冊(cè)頁(yè)面的相關(guān)資料,在Vue中可以使用組件來(lái)構(gòu)建登錄注冊(cè)頁(yè)面,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法
這篇文章主要介紹了vuejs2.0實(shí)現(xiàn)分頁(yè)組件使用$emit進(jìn)行事件監(jiān)聽(tīng)數(shù)據(jù)傳遞的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，,需要的朋友可以參考下2017-02-02