1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Calendar：
在你的 Vue 组件中导入 Calendar，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-calendar v-model="selectedDate"></el-calendar>
<p>选择的日期: {{ selectedDate }}</p>
</div>
</template>
<script>
import { ElCalendar } from 'element-plus';
export default {
components: {
ElCalendar,
},
data() {
return {
selectedDate: '',
};
},
};
</script>
在上述代码中，我们导入了 ElCalendar 组件，并在模板中使用它。通过 v-model 绑定 selectedDate 来获取用户选择的日期。
3. 自定义 Calendar：
你可以根据需要自定义 Calendar，例如，设置默认日期、禁用日期等：
<template>
<div>
<el-calendar
v-model="selectedDate"
:first-day-of-week="1"
:default-date="defaultDate"
:disabled-date="disabledDate"
></el-calendar>
<p>选择的日期: {{ selectedDate }}</p>
</div>
</template>
<script>
import { ElCalendar } from 'element-plus';
export default {
components: {
ElCalendar,
},
data() {
return {
selectedDate: '',
defaultDate: new Date(2023, 0, 15), // 默认日期为2023年1月15日
};
},
methods: {
disabledDate(time) {
// 禁用2023年2月1日之前的所有日期
return time.getTime() < new Date(2023, 1, 1).getTime();
},
},
};
</script>
在这个例子中，我们通过设置 first-day-of-week 属性来指定一周的第一天，通过 default-date 属性设置默认日期，通过 disabled-date 方法设置禁用日期。
转载请注明出处：http://www.zyzy.cn/article/detail/5584/ElementPlus