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