# vant-ui > vue mobile UI components
vue mobile UI components
[Calendar.name]: Calendar,// computed name === van-calendar
<template>
<div>
<van-cell title="选择单个日期" :value="date" @click="show = true" />
<van-calendar v-model="show" @confirm="onConfirm" />
</div>
</template>
<script>
import {
Calendar,
Cell,
// Button,
} from 'vant';
const log = console.log;
export default {
name: "CanlendarComponent",
components: {
// Calendar,
// Cell,
[Calendar.name]: Calendar,// computed name === van-calendar
[Cell.name]: Cell,
},
data() {
return {
date: '',
show: false
};
},
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
}
},
mounted() {
log(`Calendar.name`, Calendar.name);
},
};
</script>
component name
computed name
taro async callback
https://youzan.github.io/vant-weapp
https://github.com/youzan/vant-weapp
xgqfrms