今天有个小需求：有开始时间和结束时间两个时期选择器，当我选择了开始时间后，结束时间只能选择未来一个月的日期，其他日期禁止选择。这个需求不涉及业务，我就试着交给 chatGPT 来写，结果 泰酷啦！！！我直接无脑cv，达成了效果，爆赞！！！
chatGPT的回复：
您可以使用 `disabled-date` 属性来禁用日期选择。这个属性会接受一个方法，该方法将在每个日期上调用并返回一个布尔值，以指示该日期是否应该被禁用。
以下是可以实现您需求的代码：
<template>
<div>
<el-date-picker v-model="startDate" type="date" :picker-options="startPickerOptions"></el-date-picker>
<el-date-picker v-model="endDate" type="date" :picker-options="endPickerOptions"></el-date-picker>
</div>
</template>
<script>
export default {
data() {
return {
startDate: '',
endDate: ''
}
},
methods: {
disabledEndDate(time) {
// 获取开始时间
const start = new Date(this.startDate)
// 结束时间只能选择未来一个月的日期
const end = new Date(start.getTime() + 30 * 24 * 60 * 60 * 1000)
// 如果当前日期不在范围内，则禁用它
return time.getTime() < start.getTime() || time.getTime() > end.getTime()
}
},
computed: {
startPickerOptions() {
return {
// 设置开始时间的日期范围为过去一年到未来一年
disabledDate: time => time.getTime() < Date.now() - 365 * 24 * 60 * 60 * 1000 || time.getTime() > Date.now() + 365 * 24 * 60 * 60 * 1000
}
},
endPickerOptions() {
return {
disabledDate: this.disabledEndDate
}
}
}
}
</script>
在以上代码中，我们使用 `disabled-date` 属性来禁用结束时间的日期选择。我们定义了一个 `disabledEndDate` 方法，该方法将获取开始时间并仅允许选择未来一个月内的日期。
我们还通过 `picker-options` 属性将 `startPickerOptions` 和 `endPickerOptions` 对象传递给 `el-date-picker` 组件，以设置日期范围和禁用日期选择。
合理运用AI可以大大提高工作效率，相比传统搜索兼职降维打击！！！
