生活随笔
收集整理的這篇文章主要介紹了
使用Vant完成DatetimePicker 日期的选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果演示：
< template
> < div
>
< ! -- 輸入框形式--
> < van-field
readonly clickable
name = "calendar" :value
= "timeValue" label = "日期選擇：" placeholder = "發生事故的時間點" @click
= "showPopFn()" /
> < br/
> < br/
> < ! -- 按鈕框形式--
> < van-button plain
type = "primary" @click
= "showPopFn()" > 點擊選擇日期
< /van-button
> < van-field v-model
= "timeValue" placeholder = "選擇的日期結果" readonly/
> < van-popup v-model
= "show" position = "bottom" :style
= "{ height: '40%' }" > < van-datetime-picker v-model
= "currentDate" type = "date" @change
= "changeFn()" @confirm
= "confirmFn()" @cancel
= "cancelFn()" /
> < /van-popup
> < /div
>
< /template
> < script
> export default
{ data ( ) { return { msg:
'' ,currentDate: new Date
( ) ,changeDate: new Date
( ) ,show: false, // 用來顯示彈出層timeValue:
'' } } ,methods:
{ showPopFn ( ) { this.show
= true ; } ,
showPopup ( ) { this.show
= true ; } ,
changeFn ( ) { // 值變化是觸發this.changeDate
= this.currentDate // Tue Sep 08
2020 00:00:00 GMT+0800
( 中國標準時間
) } ,
confirmFn ( ) { // 確定按鈕this.timeValue
= this.timeFormat
( this.currentDate
) ; this.show
= false ; } ,
cancelFn ( ) { this.show
= true ; } ,timeFormat
( time
) { // 時間格式化
2019 -09-08
let year
= time.getFullYear
( ) ; let month
= time.getMonth
( ) +
1 ; let day
= time.getDate
( ) ; return year +
'年' + month +
'月' + day +
'日' } } ,
mounted ( ) { this.timeFormat
( new Date
( )) ; } }
< /script
> < style
>
< /style
>
注意：如果是按需引入的話，記得在main.js里面引入相應的文件奧。
// main.js文件里面的部分代碼
import { Button
} from
'vant'
import { DatetimePicker
} from
'vant' ;
import { Popup
} from
'vant' ;
import { Field
} from
'vant' ; Vue.use
( Button
)
Vue.use
( DatetimePicker
)
Vue.use
( Popup
)
Vue.use
( Field
) ;
總結
以上是生活随笔 為你收集整理的使用Vant完成DatetimePicker 日期的选择器 的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網站內容還不錯，歡迎將生活随笔 推薦給好友。
