Vue+Vant ui實(shí)現(xiàn)日期時(shí)間選擇

1、安裝Vant ui

npm i vant -S

2、在 main.js 中引入 Vant ui

// 引入vant

import Vant from 'vant'

import 'vant/lib/index.css'

Vue.use(Vant)

3、具體使用Vant DatetimePicker組件詳解

title="日期"

is-link

:value="timeValue"

@click="showPopup" />

v-model="currentDate"

type="datetime"

:loading="isLoadingShow"

:min-date="minDate"

:max-date="maxDate"

:formatter="formatter"

@cancel="show = false"

@confirm="confirmPicker"

/>

export default {

data() {

return {

timeValue: '',

show: false,

isLoadingShow: true,

currentDate: new Date(),

minDate: new Date(),

maxDate: new Date(2020, 12, 31),

};

},

created() {

this.getTime(); // 加載頁(yè)面顯示默認(rèn)時(shí)間

},

methods: {

// 顯示彈窗

showPopup () {

this.show = true

this.isLoadingShow = true

setTimeout(() => {

this.isLoadingShow = false

}, 500)

},

// 確認(rèn)選擇之后的時(shí)間

confirmPicker (val) {

let year = val.getFullYear()

let month = val.getMonth() + 1

let day = val.getDate()

let hour = val.getHours()

let minute = val.getMinutes()

// let second = val.getSeconds()

if (month >= 1 && month <= 9) { month = `0${month}` }

if (day >= 1 && day <= 9) { day = `0${day}` }

if (hour >= 0 && hour <= 9) { hour = `0${hour}` }

if (minute >= 0 && minute <= 9) { minute = `0${minute}` }

// if (second >= 0 && second <= 9) { second = `0${second}` }

this.timeValue = `${year}-${month}-${day} ${hour}:${minute}:00`

console.log(this.timeValue)

this.show = false

},

// 默認(rèn)顯示當(dāng)前時(shí)間

getTime () {

let date = new Date()

let y = date.getFullYear()

let m = date.getMonth() + 1

let d = date.getDate()

let h = date.getHours()

let min = date.getMinutes()

// let s = date.getSeconds()

if (m >= 1 && m <= 9) { m = `0${m}` }

if (d >= 1 && d <= 9) { d = `0$ozvdkddzhkzd` }

if (h >= 0 && h <= 9) { h = `0${h}` }

if (min >= 0 && min <= 9) { min = `0${min}` }

// if (s >= 0 && s <= 9) { min = `0${s}` }

let time = `${y}-${m}-$ozvdkddzhkzd ${h}:${min}:00`

this.timeValue = time

},

// 日期選項(xiàng)格式化函數(shù)

formatter (type, value) {

if (type === 'year') {

return `${value}年`

} else if (type === 'month') {

return `${value}月`

} else if (type === 'day') {

return `${value}日`

} else if (type === 'hour') {

return `${value}時(shí)`

} else if (type === 'minute') {

return `${value}分`

} else if (type === 'second') {

return `${value}秒`

}

return value

},

}

}

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vant显示日期格式_Vue+Vant ui实现日期时间选择的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。