招聘会开始结束时间限制

src/views/menduner/system/jobFair/manage/details/components/InfoSettings.vue

@@ -53,10 +53,23 @@
         </div>
       </el-form-item>
       <el-form-item label="开始时间" prop="startTime">
-        <el-date-picker v-model="formData.startTime" type="date" value-format="x" placeholder="选择开始时间" />
+        <el-date-picker
+          v-model="formData.startTime"
+          type="date"
+          value-format="x"
+          :disabledDate="disabledStartDates"
+          placeholder="选择开始时间"
+        />
       </el-form-item>
       <el-form-item label="结束时间" prop="endTime">
-        <el-date-picker v-model="formData.endTime" type="date" value-format="x" placeholder="选择结束时间" />
+        <el-date-picker 
+          v-model="formData.endTime"
+          type="date"
+          value-format="x"
+          :disabledDate="disabledEndDates"
+          placeholder="选择结束时间"
+          @change="handleEndDate"
+        />
       </el-form-item>
       <el-form-item label="状态" prop="status">
         <el-radio-group v-model="formData.status">
@@ -123,9 +136,26 @@ const formRules = reactive({
   title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
   startTime: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
   endTime: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'change' }],
 })
 const formRef = ref() // 表单 Ref
 
+// 开始时间禁选范围
+const disabledStartDates = (date: any) => {
+  return formData.value.endTime ? date.getTime() > formData.value.endTime : false
+}
+// 结束时间禁选范围
+const disabledEndDates = (date: any) => {
+  return formData.value.startTime ? date.getTime() < formData.value.startTime : false
+}
+
+const handleEndDate = () => {
+  if (!formData.value.startTime) {
+    message.warning('请先选择开始时间')
+    formData.value.endTime = undefined
+  }
+}
+
 onMounted(() => {
   if (props.info && Object.keys(props.info).length > 0) {
 		formLoading.value = true