<template>
<!-- 日期选择 -->
<van-cell title="选择单个日期" @click="onDisplay" />
<van-calendar :show="dayshow" @close="dayClose" @confirm="dayConfirm" />
选择的日期{{seldate}}
</template>
<script>
export default {
data() {
return {
//日期展示
dayshow: false,
//日期值
seldate: '',
}
},
onLoad() {
},
methods: {
//日期的方法
onDisplay() {
this.dayshow = true
console.log(this.dayshow);
},
dayClose() {
this.dayshow = false
},
formatDate(date) {
date = new Date(date);
return `${date.getMonth() + 1}/${date.getDate()}`;
},
dayConfirm(event) {
this.dayshow = false
this.seldate = this.formatDate(event.detail)
},
}
}
</script>
<style lang="scss" scoped>
</style>
【uniapp】使用Vant组件Calendar 日历组件
最新推荐文章于 2024-05-15 22:17:13 发布
关键词由CSDN通过智能技术生成