diff --git a/src/views/workflow/leave/modules/leave-operate-drawer.vue b/src/views/workflow/leave/modules/leave-operate-drawer.vue
index fc3623c0..da2a8335 100644
--- a/src/views/workflow/leave/modules/leave-operate-drawer.vue
+++ b/src/views/workflow/leave/modules/leave-operate-drawer.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import dayjs from 'dayjs';
 import { leaveTypeOptions } from '@/constants/workflow';
 import { fetchCreateLeave, fetchUpdateLeave } from '@/service/api/workflow';
 import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import { $t } from '@/locales';
+
 defineOptions({
   name: 'LeaveOperateDrawer'
 });
@@ -51,13 +53,33 @@ function createDefaultModel(): Model {
     remark: ''
   };
 }
+const dateRange = computed<[string, string] | null>({
+  get: () => {
+    if (!model.startDate || !model.endDate) return null;
+    return [model.startDate, model.endDate] as [string, string];
+  },
+  set: (value: [string, string] | null) => {
+    if (value) {
+      model.startDate = value[0];
+      model.endDate = value[1];
+      // Calculate leave days when date range changes
+      const start = dayjs(value[0]);
+      const end = dayjs(value[1]);
+      model.leaveDays = end.diff(start, 'day') + 1;
+    } else {
+      model.startDate = null;
+      model.endDate = null;
+      model.leaveDays = null;
+    }
+  }
+});
 
-type RuleKey = Extract<keyof Model, 'id' | 'leaveType' | 'startDate' | 'endDate' | 'leaveDays'>;
+type RuleKey = Extract<keyof Model, 'id' | 'leaveType' | 'leaveDays' | 'startDate' | 'endDate'>;
 
 const rules: Record<RuleKey, App.Global.FormRule> = {
   id: createRequiredRule('id不能为空'),
   leaveType: createRequiredRule('请假类型不能为空'),
-  startDate: createRequiredRule('开始时间不能为空'),
+  startDate: createRequiredRule('请假时间不能为空'),
   endDate: createRequiredRule('结束时间不能为空'),
   leaveDays: createRequiredRule('请假天数不能为空')
 };
@@ -113,14 +135,11 @@ watch(visible, () => {
         <NFormItem label="请假类型" path="leaveType">
           <NSelect v-model:value="model.leaveType" placeholder="请输入请假类型" :options="leaveTypeOptions" />
         </NFormItem>
-        <NFormItem label="开始时间" path="startDate">
-          <NDatePicker v-model:formatted-value="model.startDate" type="date" value-format="yyyy-MM-dd" clearable />
-        </NFormItem>
-        <NFormItem label="结束时间" path="endDate">
-          <NDatePicker v-model:formatted-value="model.endDate" type="date" value-format="yyyy-MM-dd" clearable />
+        <NFormItem label="请假时间" path="startDate">
+          <NDatePicker v-model:formatted-value="dateRange" type="daterange" value-format="yyyy-MM-dd" clearable />
         </NFormItem>
         <NFormItem label="请假天数" path="leaveDays">
-          <NInputNumber v-model:value="model.leaveDays" placeholder="请输入请假天数" />
+          <NInputNumber v-model:value="model.leaveDays" disabled placeholder="请输入请假天数" />
         </NFormItem>
         <NFormItem label="请假原因" path="remark">
           <NInput v-model:value="model.remark" placeholder="请输入请假原因" />