vue移动端项目vant组件库之calendar
vue移动端项目vant组件库之calendar<template><div><h3>选择单个日期</h3><van-cell title="选择单个日期" :value="date" @click="show = true" is-link /><van-calendar v-model="show" @confirm="onCo
·
vue移动端项目vant组件库之calendar
<template>
<div>
<h3>选择单个日期</h3>
<van-cell title="选择单个日期" :value="date" @click="show = true" is-link />
<van-calendar v-model="show" @confirm="onConfirm" />
<h3>选择日期区间</h3>
<van-cell
title="选择日期区间"
:value="date1"
@click="show1 = true"
is-link
/>
<van-calendar v-model="show1" type="range" @confirm="onConfirm1" />
<h3>快捷选择</h3>
<van-cell title="快捷选择" :value="date3" @click="show3 = true" is-link />
<van-calendar v-model="show3" @confirm="onConfirm3" :show-confirm="false" />
</div>
</template>
<script>
import { Calendar, Cell } from "vant";
export default {
components: {
vanCalendar: Calendar,
vanCell: Cell,
},
data() {
return {
date: "",
show: false,
date1: "",
show1: false,
date2: "",
show2: false,
date3: "",
show3: false,
};
},
methods: {
formatDate(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm(date) {
this.show = false;
this.date = this.formatDate(date);
},
formatDate1(date) {
return `${date.getMonth() + 1}/${date.getDate()}`;
},
onConfirm1(date) {
// 解构赋值
const [start, end] = date;
this.show = false;
this.date = `${this.formatDate1(start)} - ${this.formatDate1(end)}`;
},
onConfirm3(date) {
this.show3 = false;
this.date3 = this.formatDate(date);
},
},
};
</script>
<style lang="scss" scoped>
</style>
效果
更多推荐
已为社区贡献15条内容
所有评论(0)