diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
index 81a8244bb..acd4b2d09 100644
--- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -44,7 +44,7 @@ import {
   booleanExposingStateControl,
 } from "comps/controls/codeStateControl";
 
-import { getMomentLocale } from "i18n/momentLocale";
+import { getDayJSLocale } from "i18n/dayjsLocale";
 import {
   autoCompleteDate,
   itemsDataTooltip,
@@ -151,7 +151,7 @@ let AutoCompleteCompBase = (function () {
     const [validateState, setvalidateState] = useState({});
 
     //   是否中文环境
-    const [chineseEnv, setChineseEnv] = useState(getMomentLocale() === "zh-cn");
+    const [chineseEnv, setChineseEnv] = useState(getDayJSLocale() === "zh-cn");
 
     useEffect(() => {
       setsearchtext(props.value.value);
@@ -346,11 +346,11 @@ let AutoCompleteCompBase = (function () {
               tooltip: itemsDataTooltip,
               placeholder: "[]",
             })}
-            {getMomentLocale() === "zh-cn" &&
+            {getDayJSLocale() === "zh-cn" &&
               children.searchFirstPY.propertyView({
                 label: trans("autoComplete.searchFirstPY"),
               })}
-            {getMomentLocale() === "zh-cn" &&
+            {getDayJSLocale() === "zh-cn" &&
               children.searchCompletePY.propertyView({
                 label: trans("autoComplete.searchCompletePY"),
               })}
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/generate/comp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/generate/comp.tsx
index 1402baca2..c2dd82e6d 100644
--- a/client/packages/lowcoder/src/comps/comps/formComp/generate/comp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/formComp/generate/comp.tsx
@@ -88,9 +88,9 @@ const multiSelectComps: CompConfig[] = [
 const dateComp: CompConfig = {
   type: "date",
 };
-// TODO: RAHEEL
+
 function dateTimeToTimestamp(compName: string) {
-  return "moment(" + compName + ".value || 0).valueOf()";
+  return "dayjs(" + compName + ".value || 0).valueOf()";
 }
 function dateTimeComp(toTimestamp?: boolean): CompConfig {
   return {
diff --git a/client/packages/lowcoder/src/comps/generators/hookToComp.tsx b/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
index 6afbbcce1..bd9059413 100644
--- a/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
+++ b/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
@@ -42,7 +42,7 @@ export function hookToStateComp(useHookFn: () => JSONObject) {
 }
 
 /**
- * Provide a comp of static data, such as exposure of lodash, moment library
+ * Provide a comp of static data, such as exposure of lodash, day.js library
  */
 export function simpleValueComp(value: any) {
   return simpleValueGetterComp(() => value);
diff --git a/client/packages/lowcoder/src/comps/hooks/dependencyHook.tsx b/client/packages/lowcoder/src/comps/hooks/dependencyHook.tsx
index 069c8ac7b..c65895e4a 100644
--- a/client/packages/lowcoder/src/comps/hooks/dependencyHook.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/dependencyHook.tsx
@@ -1,5 +1,5 @@
 /**
  * Hooks for managing dependencies
- * lodash and moment are supported by default
+ * lodash and dayJS are supported by default
  */
 export const DependecyHook = null;
diff --git a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
index c544ffbfe..02e8e36b4 100644
--- a/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/drawerComp.tsx
@@ -125,7 +125,7 @@ let TmpDrawerComp = (function () {
             <Drawer
               resizable={resizable}
               onResizeStop={onResizeStop}
-              style={props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {}}
+              rootStyle={props.visible.value ? { overflow: "auto", pointerEvents: "auto" } : {}}
               contentWrapperStyle={{ maxHeight: "100%", maxWidth: "100%" }}
               bodyStyle={{ padding: 0, backgroundColor: props.style.background }}
               closable={false}
diff --git a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
index 5af1ed154..b71169493 100644
--- a/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/hookComp.tsx
@@ -85,7 +85,7 @@ const HookMap: HookCompMapRawType = {
   currentTime: CurrentTimeHookComp,
   lodashJsLib: LodashJsLib,
   dayJsLib: DayJsLib,
-  momentJsLib: DayJsLib,
+  momentJsLib: DayJsLib,  // old components use this hook
   utils: UtilsComp,
   message: MessageComp,
   localStorage: LocalStorageComp,
diff --git a/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx b/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx
index 0bb9a17fb..284562646 100644
--- a/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/hookListComp.tsx
@@ -16,7 +16,6 @@ const defaultHookListValue = [
   // { compType: "windowSize", name: "windowSize" },
   { compType: "urlParams", name: "url" },
   { compType: "dayJsLib", name: "dayjs" },
-  // { compType: "momentJsLib", name: "dayjs" },
   { compType: "lodashJsLib", name: "_" },
   { compType: "utils", name: "utils" },
   { compType: "message", name: "message" },
diff --git a/client/packages/lowcoder/src/i18n/momentLocale.ts b/client/packages/lowcoder/src/i18n/dayjsLocale.ts
similarity index 78%
rename from client/packages/lowcoder/src/i18n/momentLocale.ts
rename to client/packages/lowcoder/src/i18n/dayjsLocale.ts
index e1cc4538f..3b1a54f00 100644
--- a/client/packages/lowcoder/src/i18n/momentLocale.ts
+++ b/client/packages/lowcoder/src/i18n/dayjsLocale.ts
@@ -1,6 +1,6 @@
 import { language } from "i18n";
 
-export function getMomentLocale() {
+export function getDayJSLocale() {
   switch (language) {
     case "zh":
       return "zh-cn";
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 58bc84f5d..9270ed8ff 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -1700,7 +1700,7 @@ export const en = {
     preloadCSSApply: "Apply to the homepage of the workspace",
     preloadLibsTitle: "JavaScript library",
     preloadLibsHelp:
-      "Set up preloaded JavaScript libraries for all applications in the current workspace, and the system has built-in lodash, moment, uuid, numbro for direct use. JavaScript libraries are loaded before the app is initialized, so there is a certain impact on app performance.",
+      "Set up preloaded JavaScript libraries for all applications in the current workspace, and the system has built-in lodash, day.js, uuid, numbro for direct use. JavaScript libraries are loaded before the app is initialized, so there is a certain impact on app performance.",
     preloadLibsEmpty: "No JavaScript libraries were added",
     preloadLibsAddBtn: "Add a library",
     saveSuccess: "Saved successfully",
@@ -1962,7 +1962,7 @@ export const en = {
   },
   preLoad: {
     jsLibraryHelpText:
-      "Add JavaScript libraries to your current application via URL addresses. lodash, moment, uuid, numbro are built into the system for immediate use.  JavaScript libraries are loaded before the application is initialized, which can have an impact on application performance.",
+      "Add JavaScript libraries to your current application via URL addresses. lodash, day.js, uuid, numbro are built into the system for immediate use.  JavaScript libraries are loaded before the application is initialized, which can have an impact on application performance.",
     exportedAs: "Exported as",
     urlTooltip:
       "URL address of the JavaScript library, [unpkg.com](https://unpkg.com/) or [jsdelivr.net](https://www.jsdelivr.com/) is recommended",
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
index 7cdfb89b2..0ed41e322 100644
--- a/client/packages/lowcoder/src/i18n/locales/zh.ts
+++ b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -1677,7 +1677,7 @@ advanced: {
     preloadCSSApply: "应用到工作空间的首页",
     preloadLibsTitle: "JavaScript 库",
     preloadLibsHelp:
-    "为当前工作空间中的所有应用程序设置预加载的 JavaScript 库,系统内置了 lodash、moment、uuid、numbro 可供直接使用.JavaScript 库在应用程序初始化之前加载,因此对应用程序性能有一定影响.",
+    "为当前工作空间中的所有应用程序设置预加载的 JavaScript 库,系统内置了 lodash、day.js、uuid、numbro 可供直接使用.JavaScript 库在应用程序初始化之前加载,因此对应用程序性能有一定影响.",
     preloadLibsEmpty: "尚未添加 JavaScript 库",
     preloadLibsAddBtn: "添加库",
     saveSuccess: "保存成功",
@@ -1935,7 +1935,7 @@ userAuth: {
     copyPassword: "复制密码",
 },
 preLoad: {
-    jsLibraryHelpText: "通过URL链接向当前应用程序添加JavaScript库.lodash、moment、uuid、numbro内置于系统中,可立即使用.JavaScript库在应用程序初始化之前加载,这可能会影响应用程序的性能.",
+    jsLibraryHelpText: "通过URL链接向当前应用程序添加JavaScript库.lodash、day.js、uuid、numbro内置于系统中,可立即使用.JavaScript库在应用程序初始化之前加载,这可能会影响应用程序的性能.",
     exportedAs: "导出为",
     urlTooltip: "JavaScript库的URL链接,建议使用[unpkg.com](https://unpkg.com/)或[jsdelivr.net](https://www.jsdelivr.com/).",
     recommended: "推荐",
diff --git a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
index 4142f8324..1076064c0 100644
--- a/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
+++ b/client/packages/lowcoder/src/pages/editor/bottom/BottomMetaDrawer.tsx
@@ -285,7 +285,7 @@ export default function BottomMetaDrawer(props: BottomMetaDrawerProps) {
           boxShadow: "none",
           borderRadius: "0",
         }}
-        style={{
+        rootStyle={{
           position: "absolute",
           height: "100%",
           bottom: 0,
diff --git a/client/packages/lowcoder/src/util/commonUtils.ts b/client/packages/lowcoder/src/util/commonUtils.ts
index 47ba8a1ba..a9bf6ff70 100644
--- a/client/packages/lowcoder/src/util/commonUtils.ts
+++ b/client/packages/lowcoder/src/util/commonUtils.ts
@@ -1,6 +1,6 @@
 import log, { LogLevelDesc } from "loglevel";
 import dayjs from "dayjs";
-import { getMomentLocale } from "i18n/momentLocale";
+import { getDayJSLocale } from "i18n/dayjsLocale";
 import _ from "lodash";
 
 // https://github.com/vitejs/vite/discussions/7492#discussioncomment-2449310
@@ -8,7 +8,7 @@ import "dayjs/locale/en-gb";
 import "dayjs/locale/zh-cn";
 
 export function initApp() {
-  dayjs.locale(getMomentLocale());
+  dayjs.locale(getDayJSLocale());
   const logLevel = getEnvLogLevel();
   log.setLevel(logLevel);
 }
diff --git a/docs/build-apps/use-third-party-libraries.md b/docs/build-apps/use-third-party-libraries.md
index ea73a1cd2..31dbc4a9d 100644
--- a/docs/build-apps/use-third-party-libraries.md
+++ b/docs/build-apps/use-third-party-libraries.md
@@ -9,7 +9,7 @@ Lowcoder provides some JavaScript built-in libraries for use.
 | Library   | Docs                                                                 | Version                    |
 | --------- | -------------------------------------------------------------------- | -------------------------- |
 | lodash    | [https://lodash.com/docs/](https://lodash.com/docs/)                 | 4.17.21                    |
-| moment    | [https://momentjs.com/docs/](https://momentjs.com/docs/)             | 2.29.3                     |
+| day.js    | [https://day.js.org/docs](https://day.js.org/docs/)                  | 2.29.3                     |
 | uuid      | [https://github.com/uuidjs/uuid](https://github.com/uuidjs/uuid)     | 8.3.2（Support v1/v3/v4/v5） |
 | numbro    | [https://numbrojs.com/format.html](https://numbrojs.com/format.html) | 2.3.6                      |
 | papaparse | [https://www.papaparse.com/docs](https://www.papaparse.com/docs)     | 5.3.2                      |
diff --git a/docs/build-apps/write-javascript/javascript-query.md b/docs/build-apps/write-javascript/javascript-query.md
index 99e4ef469..3fda2c7f8 100644
--- a/docs/build-apps/write-javascript/javascript-query.md
+++ b/docs/build-apps/write-javascript/javascript-query.md
@@ -188,9 +188,9 @@ function isMultiple(num1, num2) {
       return num1 % num2 === 0;
    }
    
-// Call the moment library to return the current date
+// Call the day.js library to return the current date
 function getCurrentDate() {
-      return moment().format("YYYY-MM-DD");
+      return dayjs().format("YYYY-MM-DD");
 }
 ```
 
diff --git a/docs/build-apps/write-javascript/transformers.md b/docs/build-apps/write-javascript/transformers.md
index efa7d401c..3965a6ef0 100644
--- a/docs/build-apps/write-javascript/transformers.md
+++ b/docs/build-apps/write-javascript/transformers.md
@@ -24,13 +24,13 @@ In the following example, `transformer1` uses the data of star rating in `rating
 
 ### Transform timestamp
 
-Use the `moment().format()` method to transform timestamp formats. The following example converts the timestamp value of `start_time` returned by `query1` to `YYYY-MM-DD` format.
+Use the `dayjs().format()` method to transform timestamp formats. The following example converts the timestamp value of `start_time` returned by `query1` to `YYYY-MM-DD` format.
 
 ```javascript
 return query1.data.map(it => {
      return {
          ...it,
-         start_time: moment(it.start_time).format('YYYY-MM-DD')
+         start_time: dayjs(it.start_time).format('YYYY-MM-DD')
      };
 })
 ```
diff --git a/docs/build-apps/write-javascript/write-javascript-in.md b/docs/build-apps/write-javascript/write-javascript-in.md
index 52f849185..be29611c6 100644
--- a/docs/build-apps/write-javascript/write-javascript-in.md
+++ b/docs/build-apps/write-javascript/write-javascript-in.md
@@ -43,7 +43,7 @@ Lowercase a string.
 Change date format.
 
 ```javascript
-{{moment(table1.selectedRow.date_column).format('YYYY-MM-DD')}}
+{{dayjs(table1.selectedRow.date_column).format('YYYY-MM-DD')}}
 ```
 
 Return name from query results.