Element Plus是一款基于Vue 3的组件库，它提供了丰富的组件，包括Datepicker组件。本文将对Element Plus框架上的Datepicker组件的各个属性进行介绍，并罗列常见使用方法和代码示例。
Datepicker组件属性
1. type属性
type属性用于设置Datepicker的类型，可以设置为date、datetime、dates等。默认为date。
2. value属性
value属性用于设置Datepicker的当前值，可以是一个日期字符串或日期对象。
3. format属性
format属性用于设置Datepicker中显示的日期和时间的格式。可以是一个字符串或数组，例如：'yyyy-MM-dd'或['yyyy', 'MM', 'dd']。
4. min-date和max-date属性
min-date和max-date属性分别用于设置Datepicker的最小和最大可选日期。
5. disabled-date属性
disabled-date属性是一个函数，用于判断哪些日期应该被禁用。函数返回true的日期将被禁用。
常见使用方法和代码示例
1. 设置日期类型和值
代码语言：javascript复制<template>
<el-date-picker
type="date"
value="2023-03-17"
format="yyyy-MM-dd">
</el-date-picker>
</template>
2. 设置可选日期范围
代码语言：javascript复制<template>
<el-date-picker
type="date"
value="2023-03-17"
format="yyyy-MM-dd"
min-date="2023-01-01"
max-date="2023-12-31">
</el-date-picker>
</template>
3. 设置日期禁用条件
代码语言：javascript复制<template>
<el-date-picker
type="date"
value="2023-03-17"
format="yyyy-MM-dd"
disabled-date="disabledDate">
</el-date-picker>
</template>
<script>
export default {
methods: {
disabledDate(time) {
// 禁用所有周末日期
const date = new Date(time);
const day = date.getDay();
return day === 0 || day === 6;
}
}
};
</script>
4.选择多个日期
代码语言：javascript复制<template>
<el-date-picker
v-model="dates"
type="dates"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
dates: ''
}
}
}
</script>在这个案例中，我们设置type="dates"来创建一个可以选择日期范围的日期选择器。range-separator属性用于设置范围分隔符，start-placeholder和end-placeholder属性分别用于设置开始日期和结束日期的占位符。format属性用于设置日期的格式。用户可以选择一个日期范围，并将选择的日期范围绑定到dates变量上。
