1.在视图中
<el-date-picker
v-model="searchForm.startTime"
:picker-options="startPickerOptions"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择开始时间"
/>
<el-date-picker
v-model="searchForm.endTime"
:picker-options="endPickerOptions"
type="datetime"
:editable="false"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择结束时间"
/>
2.javascript
data() {
return {
searchForm: {
startTime: '',
endTime: '',
},
startPickerOptions: {
disabledDate: (time) => {
let endTime = this.searchForm.endTime
if (endTime) {
return time.getTime() > new Date(endTime).getTime()
}
}
},
endPickerOptions: {
disabledDate: (time) => {
let startTime = this.searchForm.startTime
if (startTime) {
return time.getTime() < new Date(startTime).getTime()
}
}
},
}
3.示例图:

该文章展示了如何在Vue.js中使用el-date-picker组件来创建一个日期时间选择器,并设置开始和结束时间的禁用日期。通过v-model绑定搜索表单的时间变量,利用picker-options的disabledDate属性来禁止选择超出开始和结束时间范围的日期。
4554

被折叠的 条评论
为什么被折叠?



