溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關利用Vant實現一個DatetimePicker 日期選擇器，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
效果展示：
代碼展示：
<template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">點擊選擇日期</van-button> <van-field v-model="timeValue" placeholder="選擇的日期結果" readonly /> <van-popup v-model="show" position="bottom" :> <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 時間選擇的使用，以及如何使用里面的函數
小程序使用vant組件庫里的DatetimePicker 時間選擇的使用（困擾我最大的坑，聽我慢慢細說）？
由于我想要在小程序里加入vant庫的時間選擇器，看了一下vant的官方文檔后，十分覺得里面說的太過簡潔，讓我看的很迷：
第一點看不懂的是明明例子都有寫出來了，代碼還沒有貼出來，只貼出了基本的例子的代碼：
下面這個代碼：
效果也不是上圖的效果；
一些參數的解釋讓我也饒了一大圈，才成功通過改這些參數，成功弄成這個樣式出來
會讓人誤會的說明：
后面我把這個type改成year-month-time就可以了，具體代碼如下：
<van-datetime-picker
type="year-month-time"
value="{{ currentDate }}"
min-date="{{ minDate }}"
bind:input="onInput"
bind:confirm="onConfirm"
bind:change="onChange"
/>
data:{
minHour: 0,
maxHour: 24,
minDate: new Date().getTime(),
currentDate: new Date().getTime(),
}
onInput(event) {
this.setData({
currentDate: event.detail,
});
},就可以呈現出上面那種效果了。
第二點看不懂的是：如何使用change里的函數（文檔里面也沒有例子，也沒有說明，而網上大部分都是網頁來使用，半點沒有涉及到小程序的，就算有涉及到，也是亂說的，或者是如何使用vant而已）：
解決方案：使用里面的event.detail來調用getValues(),而不能使用event.getValues().
onChange(event){
this.setData({
reserveCopyTime:event.detail.getValues(),
})
},關于利用Vant實現一個DatetimePicker 日期選擇器就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
