1. 基本用法:
<DatePicker v-model="selectedDate" />
在上述例子中，v-model 用于绑定日期选择器的值，selectedDate 是在 data 中定义的变量。
2. 禁用状态:
<DatePicker v-model="selectedDate" disabled />
添加 disabled 属性可以禁用日期选择器。
3. 可清空:
<DatePicker v-model="selectedDate" clearable />
添加 clearable 属性可以在日期选择器后添加清空按钮。
4. 默认日期:
<DatePicker v-model="selectedDate" :default-value="defaultDate" />
使用 default-value 属性可以设置日期选择器的默认值。
data() {
return {
defaultDate: new Date(2022, 0, 1) // 示例：2022 年 1 月 1 日
};
}
5. 日期范围:
<DatePicker
v-model="selectedDate"
:start="startDate"
:end="endDate"
:range-separator="'至'"
/>
使用 start 和 end 属性可以设置日期选择器的范围。range-separator 属性用于设置日期范围的分隔符。
data() {
return {
startDate: new Date(2022, 0, 1),
endDate: new Date(2022, 11, 31)
};
}
6. 自定义日期格式:
<DatePicker v-model="selectedDate" :format="customFormat" />
使用 format 属性可以自定义日期的显示格式。
methods: {
customFormat(value) {
return value ? `${value.getFullYear()} 年 ${value.getMonth() + 1} 月 ${value.getDate()} 日` : '';
}
}
7. 日期禁用:
<DatePicker
v-model="selectedDate"
:disabled-date="disableDate"
/>
使用 disabled-date 属性可以设置禁用的日期。
methods: {
disableDate(time) {
return time.getTime() < Date.now() - 8.64e7; // 示例：禁用过去的日期
}
}
以上是一些常见的 Element-React DatePicker 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5607/Element-React