vant - 彈框 【Popup 彈出層】【DatetimePicker 時間選擇】

 

【HelloWorld.vue】

<template>
    <div class="hello">
        <van-row class="m-header">
            <van-col span="24">
                <van-icon name="arrow-left" class="m-header-icon" />內容</van-col>
        </van-row>

        <van-button type="primary" @click="showpopup">按鈕</van-button>

        <van-popup v-model="show" position="bottom">
            <van-datetime-picker 
                v-model="currentDate" 
                type="date" 
                :min-date="minDate" 
                :max-date="maxDate"
                :formatter="formatter"
            />
        </van-popup> 
    </div>
</template>

 

<script>
    import { Popup } from 'vant';
    Vue.use(Popup);

    export default {
        data() {
            return {
                show: false,
                minDate: new Date(1990,1,1),
                maxDate: new Date(2030,1,1),
          currentDate: new Date()
            };
        },
        methods:{
            popup:function(){
                if(!this.show){
                    this.show = true;
                }else{
                    this.show = false;
                }
            },
            formatter(type, value) {
          　　if (type === 'year') {
            　　return `${value}年`;
          　　} else if (type === 'month') {
          　　  return `${value}月`
          　　} else if (type === 'day') {
            　　return `${value}日`
          　　} 
          　　return value;
        　　}
        }
    };
</script>

 

position彈框位置等屬性查看vant API 【Popup 彈出層】

type="datetime"

具體到時間

 

 

 

type="year-month"

 

只有年、月