vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

时间:2023-03-08 16:15:47

vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

【HelloWorld.vue】

<template>
<div class="hello">
<van-row class="m-header">
<van-col span="">
<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(,,),
maxDate: new Date(,,),
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"

具体到时间

vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】

type="year-month"

只有年、月

vant - 弹框 【Popup 弹出层】【DatetimePicker 时间选择】