diff --git a/src/components/common/datetime-range.vue b/src/components/common/datetime-range.vue
index 706c2a9..c780241 100644
--- a/src/components/common/datetime-range.vue
+++ b/src/components/common/datetime-range.vue
@@ -1,60 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import dayjs from 'dayjs';
 import { $t } from '@/locales';
+import { monthRange } from '@/utils/common';
 
 defineOptions({
   name: 'DatetimeRange'
 });
 
+// 注意：格式与 day.js 大小写不一样
 const DATETIME_FORMAT_ISO8601 = "yyyy-MM-dd'T'HH:mm:ss";
 
-/** 创建 `过去n个自然月` 时间区间 */
-const monthRange = (months: number) =>
-  [
-    dayjs()
-      .subtract(months - 1, 'month')
-      .startOf('month')
-      .valueOf(),
-    dayjs().endOf('day').valueOf()
-  ] as const;
-
 const modelValue = defineModel<[string, string] | null>('value');
 
-interface Props {
-  noDefault?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  noDefault: false
-});
-
-const onUpdateFormattedValue = (formattedValue: [string, string] | null) => {
-  modelValue.value = formattedValue;
-};
-
-const timestampValue = ref<[number, number] | null>(props.noDefault ? null : [...monthRange(1)]);
-
 const createShortcuts = () => {
   const shortcuts: any = {};
-  shortcuts[$t('common.currentMonth')] = monthRange(1);
-  shortcuts[$t('common.lastMonth')] = monthRange(2);
-  shortcuts[$t('common.lastTwoMonth')] = monthRange(3);
+  shortcuts[$t('common.currentMonth')] = monthRange(0, 'month');
+  shortcuts[$t('common.lastMonth')] = monthRange(1, 'month');
+  shortcuts[$t('common.lastTwoMonth')] = monthRange(2, 'month');
   return shortcuts;
 };
 </script>
 
 <template>
   <NDatePicker
-    v-model:value="timestampValue"
+    v-model:formatted-value="modelValue"
     type="datetimerange"
     :value-format="DATETIME_FORMAT_ISO8601"
-    class="w-400px"
     clearable
     :default-time="['00:00:00', '23:56:56']"
     :shortcuts="createShortcuts()"
     :actions="['clear', 'confirm']"
-    @update:formatted-value="onUpdateFormattedValue"
   />
 </template>
 
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 6fc8aae..ab2388a 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,4 +1,5 @@
 import { Md5 } from 'ts-md5';
+import dayjs from 'dayjs';
 import { $t } from '@/locales';
 
 /**
@@ -117,3 +118,31 @@ export function toggleHtmlClass(className: string) {
     remove
   };
 }
+
+/**
+ * 创建 `最近n个自然月` timestamp时间区间
+ *
+ * @param months 月数
+ * @param startOf 时间的开始类型
+ * @returns timestamp时间区间
+ */
+export function monthRange(months: number = 1, startOf: dayjs.OpUnitType = 'day') {
+  return [dayjs().subtract(months, 'month').startOf(startOf).valueOf(), dayjs().endOf('day').valueOf()] as [
+    number,
+    number
+  ];
+}
+
+/**
+ * 创建 `最近n个自然月` 字符串时间区间
+ *
+ * @param months 月数
+ * @param startOf 时间的开始类型
+ * @returns 字符串时间区间
+ */
+export function monthRangeISO8601(months: number = 1, startOf: dayjs.OpUnitType = 'day') {
+  return [
+    dayjs().subtract(months, 'month').startOf(startOf).format('YYYY-MM-DDTHH:mm:ss'),
+    dayjs().endOf('day').format('YYYY-MM-DDTHH:mm:ss')
+  ] as [string, string];
+}
diff --git a/src/views/home/modules/task-tab.vue b/src/views/home/modules/task-tab.vue
index 60f6759..403a282 100644
--- a/src/views/home/modules/task-tab.vue
+++ b/src/views/home/modules/task-tab.vue
@@ -204,12 +204,7 @@ getGroupNames();
         <NRadioButton value="MONTH" :label="$t('page.home.retryTab.params.month')" />
         <NRadioButton value="YEAR" :label="$t('page.home.retryTab.params.year')" />
       </NRadioGroup>
-      <DatetimeRange
-        v-model:value="tabParams.datetimeRange"
-        no-default
-        @update:value="onUpdateDate"
-        @clear="onClearDate"
-      />
+      <DatetimeRange v-model:value="tabParams.datetimeRange" @update:value="onUpdateDate" @clear="onClearDate" />
       <NSelect v-model:value="tabParams.groupName" :options="groupOptions" class="w-200px lg:w-150px md:w-170px" />
     </div>
   </div>
diff --git a/src/views/job/batch/index.vue b/src/views/job/batch/index.vue
index 4ed9111..053afd4 100644
--- a/src/views/job/batch/index.vue
+++ b/src/views/job/batch/index.vue
@@ -7,7 +7,7 @@ import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
 import { operationReasonRecord, taskBatchStatusRecord } from '@/constants/business';
-import { tagColor } from '@/utils/common';
+import { monthRangeISO8601, tagColor } from '@/utils/common';
 import JobBatchSearch from './modules/job-batch-search.vue';
 import JobBatchDetailDrawer from './modules/job-batch-detail-drawer.vue';
 
@@ -27,10 +27,7 @@ const { columnChecks, columns, data, getData, loading, mobilePagination, searchP
     groupName: null,
     jobName: null,
     taskBatchStatus: null,
-    datetimeRange: null
-
-    // beginDate: null,
-    // endDate: null
+    datetimeRange: monthRangeISO8601()
   },
   searchParams: {
     jobName,
diff --git a/src/views/retry/dead-letter/index.vue b/src/views/retry/dead-letter/index.vue
index c810836..fb45cf0 100644
--- a/src/views/retry/dead-letter/index.vue
+++ b/src/views/retry/dead-letter/index.vue
@@ -13,7 +13,7 @@ import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { retryTaskTypeRecord } from '@/constants/business';
-import { tagColor } from '@/utils/common';
+import { monthRangeISO8601, tagColor } from '@/utils/common';
 import RetryDeadLetterSearch from './modules/dead-letter-search.vue';
 import RetryDeadLetterDetailDrawer from './modules/retry-letter-detail-drawer.vue';
 
@@ -31,7 +31,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     size: 10,
     groupName: null,
     sceneName: null,
-    datetimeRange: null
+    datetimeRange: monthRangeISO8601()
     // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
     // the value can not be undefined, otherwise the property in Form will not be reactive
   },
diff --git a/src/views/retry/log/index.vue b/src/views/retry/log/index.vue
index df49819..80f37a7 100644
--- a/src/views/retry/log/index.vue
+++ b/src/views/retry/log/index.vue
@@ -7,7 +7,7 @@ import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { retryTaskStatusTypeRecord, retryTaskTypeRecord } from '@/constants/business';
-import { tagColor } from '@/utils/common';
+import { monthRangeISO8601, tagColor } from '@/utils/common';
 import RetryLogSearch from './modules/retry-log-search.vue';
 import RetryLogDetailDrawer from './modules/retry-log-detail-drawer.vue';
 
@@ -32,7 +32,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     idempotentId: null,
     bizNo: null,
     retryStatus: null,
-    datetimeRange: null
+    datetimeRange: monthRangeISO8601()
   },
   searchParams: {
     retryStatus
diff --git a/src/views/workflow/batch/index.vue b/src/views/workflow/batch/index.vue
index 54096c9..c877943 100644
--- a/src/views/workflow/batch/index.vue
+++ b/src/views/workflow/batch/index.vue
@@ -6,7 +6,9 @@ import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
 import { operationReasonRecord, taskBatchStatusRecord } from '@/constants/business';
+import { monthRangeISO8601 } from '@/utils/common';
 import WorkflowBatchSearch from './modules/workflow-batch-search.vue';
+
 const router = useRouter();
 
 const appStore = useAppStore();
@@ -23,7 +25,7 @@ const { columns, columnChecks, data, getData, loading, mobilePagination, searchP
     workflowId: null,
     groupName: null,
     taskBatchStatus: null,
-    datetimeRange: null
+    datetimeRange: monthRangeISO8601()
   },
   searchParams: {
     workflowId,