diff --git a/webapp/packages/supersonic-fe/package.json b/webapp/packages/supersonic-fe/package.json
index 8fb8ce07d..6b4beb226 100644
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -74,6 +74,7 @@
     "copy-to-clipboard": "^3.3.1",
     "cross-env": "^7.0.3",
     "crypto-js": "^4.0.0",
+    "dayjs": "^1.11.10",
     "echarts": "^5.0.2",
     "echarts-for-react": "^3.0.1",
     "eslint-config-tencent": "^1.0.4",
diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
index 901743eee..1bd71cdc0 100644
--- a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
+++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
@@ -34,7 +34,7 @@ import {
   DatePicker,
 } from 'antd';
 
-import moment from 'moment';
+import dayjs from 'dayjs';
 import styles from './style.less';
 
 const { CheckableTag } = Tag;
@@ -154,7 +154,7 @@ const DynamicDate: React.FC<Props> = ({
       [DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
         perPeriodType: PerDatePeriodType.PERDAY,
       },
-      [DynamicAdvancedConfigType.FROM_DATE]: { date: moment() },
+      [DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
     };
     if (advancedPanelFormData) {
       defaultConfig = { ...advancedPanelFormData };
@@ -237,7 +237,7 @@ const DynamicDate: React.FC<Props> = ({
     const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
       mergeConfigTypeData,
       configType,
-      { maxPartition: moment().format('YYYY-MM-DD') },
+      { maxPartition: dayjs().format('YYYY-MM-DD') },
     );
     mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
     onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
@@ -505,11 +505,11 @@ const DynamicDate: React.FC<Props> = ({
                         disabled={isAdvancedConfigTypeRadioDisabled(
                           DynamicAdvancedConfigType.FROM_DATE,
                         )}
-                        value={moment(
+                        value={dayjs(
                           advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
                         )}
                         disabledDate={(current) => {
-                          return current && current > moment().endOf('day');
+                          return current && current > dayjs().endOf('day');
                         }}
                         picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
                         onChange={(date, dateString) => {
diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx
index f9abe418b..de10f0f44 100644
--- a/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx
+++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/StaticDate.tsx
@@ -3,7 +3,7 @@ import { Space, DatePicker } from 'antd';
 import { DateMode, DateRangeType, DateRangePicker, DateRangeTypeToPickerMap } from './type';
 import { getDateStrings } from './utils';
 import { DateSettingType, StaticDateSelectMode } from './type';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const { RangePicker } = DatePicker;
 
@@ -22,7 +22,7 @@ const StaticDate: React.FC<Props> = ({
   onDateRangeChange,
 }: any) => {
   const [latestDateMap, setLatestDateMap] = useState<any>({
-    maxPartition: moment().format('YYYY-MM-DD'),
+    maxPartition: dayjs().format('YYYY-MM-DD'),
   });
 
   const [staticFormData, setStaticFormData] = useState<any>(() => {
@@ -70,14 +70,14 @@ const StaticDate: React.FC<Props> = ({
     const initDateRange = initialValues?.dateRange || [];
     const [startDate, endDate] = initDateRange;
     const { maxPartition } = latestDateMap;
-    let dateRangeMoment = [moment(), moment()];
+    let dateRangeMoment = [dayjs(), dayjs()];
     // 如果initialValues时间存在则按initialValues时间初始化
     if (startDate && endDate) {
-      dateRangeMoment = [moment(startDate), moment(endDate)];
+      dateRangeMoment = [dayjs(startDate), dayjs(endDate)];
     }
     // dateRangeValue未被初始化且maxPartition存在，则按maxPartition初始化
     if (dateRangeValue.length === 0 && !(startDate && endDate) && maxPartition) {
-      dateRangeMoment = [moment(maxPartition), moment(maxPartition)];
+      dateRangeMoment = [dayjs(maxPartition), dayjs(maxPartition)];
     }
     // 否则按当前时间初始化
     setDateRangeValue(dateRangeMoment);
@@ -122,7 +122,7 @@ const StaticDate: React.FC<Props> = ({
       isDateRangeChange,
     });
     if (dateStrings[0] && dateStrings[1]) {
-      setDateRangeValue([moment(dateStrings[0]), moment(dateStrings[1])]);
+      setDateRangeValue([dayjs(dateStrings[0]), dayjs(dateStrings[1])]);
       updateStaticFormData({
         dateMode,
         dateRangeType,
diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
index bcbeb6b8b..ed176a095 100644
--- a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
@@ -15,7 +15,7 @@ import { DateSettingType, DateRangeParams, DynamicAdvancedConfigType } from './t
 import { LatestDateMap } from './type';
 import StaticDate from './StaticDate';
 import DynamicDate from './DynamicDate';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { ProCard } from '@ant-design/pro-card';
 
 type Props = {
@@ -90,7 +90,7 @@ const MDatePicker: React.FC<Props> = ({
   };
 
   const [latestDateMap, setLatestDateMap] = useState<LatestDateMap>({
-    maxPartition: moment().format('YYYY-MM-DD'),
+    maxPartition: dayjs().format('YYYY-MM-DD'),
   });
   const [dateRangesParams] = useState(() => {
     return initialValues ? generatorDateRangesParams(initialValues) : {};