Vue+Vant ui實現日期時間選擇

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(); // 加載頁面顯示默認時間

},

methods: {

// 顯示彈窗

showPopup () {

this.show = true

this.isLoadingShow = true

setTimeout(() => {

this.isLoadingShow = false

}, 500)

},

// 確認選擇之后的時間

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

},

// 默認顯示當前時間

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

},

// 日期選項格式化函數

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}時`

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

return `${value}分`

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

return `${value}秒`

}

return value

},

}

}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。