基本用法：
<template>
<van-calendar v-model="selectedDate" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
在上述代码中，通过 v-model 双向绑定的方式，你可以获取用户选择的日期。
选择范围：
<template>
<van-calendar v-model="dateRange" type="range" />
</template>
<script>
export default {
data() {
return {
dateRange: [new Date(), new Date()]
};
}
};
</script>
通过设置 type 属性为 "range"，你可以实现日期范围的选择。
自定义主题色：
<template>
<van-calendar v-model="selectedDate" color="#7232dd" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
通过设置 color 属性，你可以自定义日历组件的主题颜色。
选择年份和月份：
<template>
<van-calendar v-model="selectedDate" show-toolbar />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date()
};
}
};
</script>
通过设置 show-toolbar 属性，你可以在日历上方显示年份和月份的选择器。
自定义日期标记：
<template>
<van-calendar v-model="selectedDate" :min-date="minDate" :max-date="maxDate" :date-mark="dateMark" />
</template>
<script>
export default {
data() {
return {
selectedDate: new Date(),
minDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 7),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 7),
dateMark: [
{ date: '2023-12-25', type: 'single', color: 'red' },
{ start: '2023-12-28', end: '2023-12-30', type: 'multiple', color: 'blue' },
// ...其他日期标记
]
};
}
};
</script>
通过设置 date-mark 属性，你可以自定义日期的标记，例如单个日期、日期范围等。
以上是一些 Vant3 Calendar 日历组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Calendar 日历文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/calendar)。
转载请注明出处：http://www.zyzy.cn/article/detail/5717/Vant