support date format in date_selector (#1298)

resolves #1037

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

frontend/taipy-gui/package-lock.json

@@ -961,9 +961,9 @@
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz",
-      "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
       "dependencies": {
         "@floating-ui/dom": "^1.0.0"
       },
@@ -1855,11 +1855,11 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.4.0.tgz",
-      "integrity": "sha512-Xh0LD/PCYIWWSchvtnEHdUfIsnANA0QOppUkCJ+4b8mN7z+TMEBA/LHmzA2+edxo7eanyfJ7L52znxwPP4vX8Q==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.5.0.tgz",
+      "integrity": "sha512-azm9AX36/XzllKtfyHn8u8iYDsxf425/LacP4oVaCeQQgIasajSRFxU/g8vxpNWwgTuzIeWwKjj8cvTc/2UBAw==",
       "dependencies": {
-        "@babel/runtime": "^7.24.0",
+        "@babel/runtime": "^7.24.5",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.14",
         "@mui/utils": "^5.15.14",
@@ -1920,11 +1920,11 @@
       }
     },
     "node_modules/@mui/x-tree-view": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.4.0.tgz",
-      "integrity": "sha512-gUAZ21wUbc4cpk5sAsUjZNtdryxIVgVYRYiZsz8OTzDk82JUlGmULF6Tpex93NYI+tykkrz1+/4/Tg9MIIAKUg==",
+      "version": "7.5.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.5.0.tgz",
+      "integrity": "sha512-Oy+awMPMN8M6QE6fzKwrQSG/7Rh0sEDvEc7TyENP7h75J2LPy5qqztCgRTlliEG1/Iq+aC4yFoIsJnEUH+M4gw==",
       "dependencies": {
-        "@babel/runtime": "^7.24.0",
+        "@babel/runtime": "^7.24.5",
         "@mui/base": "^5.0.0-beta.40",
         "@mui/system": "^5.15.14",
         "@mui/utils": "^5.15.14",
@@ -2511,9 +2511,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.2",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.2.tgz",
-      "integrity": "sha512-0xPVnyTDZk6OquD2XeiCvqO/KMDhHdyqRUgXoVtJWy8TjsQsDDTFb5wnifke51/yuzxZ3UWVt4qfxltnCWW2TQ==",
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
+      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
       "dev": true
     },
     "node_modules/@types/mdast": {
@@ -2695,16 +2695,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
-      "integrity": "sha512-6e+X0X3sFe/G/54aC3jt0txuMTURqLyekmEHViqyA2VnxhLMpvA6nqmcjIy+Cr9tLDHPssA74BP5Mx9HQIxBEA==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.10.0.tgz",
+      "integrity": "sha512-PzCr+a/KAef5ZawX7nbyNwBDtM1HdLIT53aSA2DDlxmxMngZ43O8SIePOeX8H5S+FHXeI6t97mTt/dDdzY4Fyw==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "7.9.0",
-        "@typescript-eslint/type-utils": "7.9.0",
-        "@typescript-eslint/utils": "7.9.0",
-        "@typescript-eslint/visitor-keys": "7.9.0",
+        "@typescript-eslint/scope-manager": "7.10.0",
+        "@typescript-eslint/type-utils": "7.10.0",
+        "@typescript-eslint/utils": "7.10.0",
+        "@typescript-eslint/visitor-keys": "7.10.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -2728,15 +2728,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.9.0.tgz",
-      "integrity": "sha512-qHMJfkL5qvgQB2aLvhUSXxbK7OLnDkwPzFalg458pxQgfxKDfT1ZDbHQM/I6mDIf/svlMkj21kzKuQ2ixJlatQ==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.10.0.tgz",
+      "integrity": "sha512-2EjZMA0LUW5V5tGQiaa2Gys+nKdfrn2xiTIBLR4fxmPmVSvgPcKNW+AE/ln9k0A4zDUti0J/GZXMDupQoI+e1w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "7.9.0",
-        "@typescript-eslint/types": "7.9.0",
-        "@typescript-eslint/typescript-estree": "7.9.0",
-        "@typescript-eslint/visitor-keys": "7.9.0",
+        "@typescript-eslint/scope-manager": "7.10.0",
+        "@typescript-eslint/types": "7.10.0",
+        "@typescript-eslint/typescript-estree": "7.10.0",
+        "@typescript-eslint/visitor-keys": "7.10.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -2756,13 +2756,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.9.0.tgz",
-      "integrity": "sha512-ZwPK4DeCDxr3GJltRz5iZejPFAAr4Wk3+2WIBaj1L5PYK5RgxExu/Y68FFVclN0y6GGwH8q+KgKRCvaTmFBbgQ==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.10.0.tgz",
+      "integrity": "sha512-7L01/K8W/VGl7noe2mgH0K7BE29Sq6KAbVmxurj8GGaPDZXPr8EEQ2seOeAS+mEV9DnzxBQB6ax6qQQ5C6P4xg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.9.0",
-        "@typescript-eslint/visitor-keys": "7.9.0"
+        "@typescript-eslint/types": "7.10.0",
+        "@typescript-eslint/visitor-keys": "7.10.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2773,13 +2773,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.9.0.tgz",
-      "integrity": "sha512-6Qy8dfut0PFrFRAZsGzuLoM4hre4gjzWJB6sUvdunCYZsYemTkzZNwF1rnGea326PHPT3zn5Lmg32M/xfJfByA==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.10.0.tgz",
+      "integrity": "sha512-D7tS4WDkJWrVkuzgm90qYw9RdgBcrWmbbRkrLA4d7Pg3w0ttVGDsvYGV19SH8gPR5L7OtcN5J1hTtyenO9xE9g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "7.9.0",
-        "@typescript-eslint/utils": "7.9.0",
+        "@typescript-eslint/typescript-estree": "7.10.0",
+        "@typescript-eslint/utils": "7.10.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -2800,9 +2800,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.9.0.tgz",
-      "integrity": "sha512-oZQD9HEWQanl9UfsbGVcZ2cGaR0YT5476xfWE0oE5kQa2sNK2frxOlkeacLOTh9po4AlUT5rtkGyYM5kew0z5w==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.10.0.tgz",
+      "integrity": "sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2813,13 +2813,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.9.0.tgz",
-      "integrity": "sha512-zBCMCkrb2YjpKV3LA0ZJubtKCDxLttxfdGmwZvTqqWevUPN0FZvSI26FalGFFUZU/9YQK/A4xcQF9o/VVaCKAg==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.10.0.tgz",
+      "integrity": "sha512-LXFnQJjL9XIcxeVfqmNj60YhatpRLt6UhdlFwAkjNc6jSUlK8zQOl1oktAP8PlWFzPQC1jny/8Bai3/HPuvN5g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.9.0",
-        "@typescript-eslint/visitor-keys": "7.9.0",
+        "@typescript-eslint/types": "7.10.0",
+        "@typescript-eslint/visitor-keys": "7.10.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -2841,15 +2841,15 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.9.0.tgz",
-      "integrity": "sha512-5KVRQCzZajmT4Ep+NEgjXCvjuypVvYHUW7RHlXzNPuak2oWpVoD1jf5xCP0dPAuNIchjC7uQyvbdaSTFaLqSdA==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.10.0.tgz",
+      "integrity": "sha512-olzif1Fuo8R8m/qKkzJqT7qwy16CzPRWBvERS0uvyc+DHd8AKbO4Jb7kpAvVzMmZm8TrHnI7hvjN4I05zow+tg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "7.9.0",
-        "@typescript-eslint/types": "7.9.0",
-        "@typescript-eslint/typescript-estree": "7.9.0"
+        "@typescript-eslint/scope-manager": "7.10.0",
+        "@typescript-eslint/types": "7.10.0",
+        "@typescript-eslint/typescript-estree": "7.10.0"
       },
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -2863,12 +2863,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.9.0.tgz",
-      "integrity": "sha512-iESPx2TNLDNGQLyjKhUvIKprlP49XNEK+MvIf9nIO7ZZaZdbnfWKHnXAgufpxqfA0YryH8XToi4+CjBgVnFTSQ==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.10.0.tgz",
+      "integrity": "sha512-9ntIVgsi6gg6FIq9xjEO4VQJvwOqA3jaBFQJ/6TK5AvEup2+cECI6Fh7QiBxmfMHXU0V0J4RyPeOU1VDNzl9cg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "7.9.0",
+        "@typescript-eslint/types": "7.10.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -3593,9 +3593,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.1.tgz",
+      "integrity": "sha512-+LV37nQcd1EpFalkXksWNBiA17NZ5m5/WspmHGmZmdx1qBOg/VNq/c4eRJiA9VQQHBOs+N0ZhhdU10h2TyNK7Q==",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -3795,12 +3795,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5317,9 +5317,9 @@
       "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.772",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.772.tgz",
-      "integrity": "sha512-jFfEbxR/abTTJA3ci+2ok1NTuOBBtB4jH+UT6PUmRN+DY3WSD4FFRsgoVQ+QNIJ0T7wrXwzsWCI2WKC46b++2A=="
+      "version": "1.4.776",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.776.tgz",
+      "integrity": "sha512-s694bi3+gUzlliqxjPHpa9NRTlhzTgB34aan+pVKZmOTGy2xoZXl+8E1B8i5p5rtev3PKMK/H4asgNejC+YHNg=="
     },
     "node_modules/element-size": {
       "version": "1.1.1",
@@ -5552,9 +5552,9 @@
       }
     },
     "node_modules/es-module-lexer": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.2.tgz",
-      "integrity": "sha512-l60ETUTmLqbVbVHv1J4/qj+M8nq7AwMzEcg3kmJDt9dCNrTk+yHcYFf/Kw75pMDwd9mPcIGCG5LcS20SxYRzFA==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.3.tgz",
+      "integrity": "sha512-i1gCgmR9dCl6Vil6UKPI/trA69s08g/syhiDK9TG0Nf1RJjjFI+AzoWW7sPufzkgYAn861skuCwJa0pIIHYxvg==",
       "dev": true
     },
     "node_modules/es-object-atoms": {
@@ -6241,9 +6241,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -9195,6 +9195,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lint-staged/node_modules/micromatch": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/lint-staged/node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -10189,18 +10202,30 @@
       ]
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.6.tgz",
+      "integrity": "sha512-Y4Ypn3oujJYxJcMacVgcs92wofTHxp9FzfDpQON4msDefoC0lb3ETvQLOdLcbhSwU1bz8HrL/1sygfBIHudrkQ==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
-        "picomatch": "^2.3.1"
+        "braces": "^3.0.3",
+        "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=8.6"
       }
     },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -13108,9 +13133,9 @@
       }
     },
     "node_modules/ts-jest": {
-      "version": "29.1.2",
-      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.2.tgz",
-      "integrity": "sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==",
+      "version": "29.1.3",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.3.tgz",
+      "integrity": "sha512-6L9qz3ginTd1NKhOxmkP0qU3FyKjj5CPoY+anszfVn6Pmv/RIKzhiMCsH7Yb7UvJR9I2A64rm4zQl531s2F1iw==",
       "dev": true,
       "dependencies": {
         "bs-logger": "0.x",
@@ -13126,10 +13151,11 @@
         "ts-jest": "cli.js"
       },
       "engines": {
-        "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
       },
       "peerDependencies": {
         "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/transform": "^29.0.0",
         "@jest/types": "^29.0.0",
         "babel-jest": "^29.0.0",
         "jest": "^29.0.0",
@@ -13139,6 +13165,9 @@
         "@babel/core": {
           "optional": true
         },
+        "@jest/transform": {
+          "optional": true
+        },
         "@jest/types": {
           "optional": true
         },

frontend/taipy-gui/src/components/Taipy/DateRange.spec.tsx

@@ -121,6 +121,24 @@ describe("DateRange Component", () => {
         expect(input2).toBeInTheDocument();
         expect(cleanText(input2?.value || "")).toEqual("01/31/2001");
     });
+    it("displays the default value with format", async () => {
+        render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateRange
+                    defaultDates={defaultDates}
+                    dates={undefined as unknown as string[]}
+                    className="taipy-date-range"
+                    format="dd-MM-yyyy"
+                />
+            </LocalizationProvider>
+        );
+        const input = document.querySelector(".taipy-date-range-picker-start input") as HTMLInputElement;
+        expect(input).toBeInTheDocument();
+        expect(cleanText(input?.value || "")).toEqual("01-01-2001");
+        const input2 = document.querySelector(".taipy-date-range-picker-end input") as HTMLInputElement;
+        expect(input2).toBeInTheDocument();
+        expect(cleanText(input2?.value || "")).toEqual("31-01-2001");
+    });
     it("shows labels", async () => {
         const { getByLabelText } = render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -252,6 +270,25 @@ describe("DateRange with time Component", () => {
         expect(input2).toBeInTheDocument();
         expect(cleanText(input2?.value || "").toLocaleLowerCase()).toEqual("01/31/2001 12:00 am");
     });
+    it("displays the default value with format", async () => {
+        render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateRange
+                    defaultDates="[&quot;2001-01-01T00:10:01.001Z&quot;,&quot;2001-01-31T00:11:01.001Z&quot;]"
+                    withTime={true}
+                    dates={undefined as unknown as string[]}
+                    className="tp-dt"
+                    format="dd-MM-yyyy mm"
+                />
+            </LocalizationProvider>
+        );
+        const input = document.querySelector(".tp-dt-picker-start input") as HTMLInputElement;
+        expect(input).toBeInTheDocument();
+        expect(cleanText(input?.value || "").toLocaleLowerCase()).toEqual("01-01-2001 10");
+        const input2 = document.querySelector(".tp-dt-picker-end input") as HTMLInputElement;
+        expect(input2).toBeInTheDocument();
+        expect(cleanText(input2?.value || "").toLocaleLowerCase()).toEqual("31-01-2001 11");
+    });
     it("shows labels", async () => {
         const { getByLabelText } = render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>

frontend/taipy-gui/src/components/Taipy/DateRange.tsx

@@ -166,6 +166,7 @@ const DateRange = (props: DateRangeProps) => {
                                     disabled={!active}
                                     slotProps={textFieldProps}
                                     label={props.labelStart}
+                                    format={props.format}
                                 />
                                 -
                                 <DateTimePicker
@@ -180,6 +181,7 @@ const DateRange = (props: DateRangeProps) => {
                                     disabled={!active}
                                     slotProps={textFieldProps}
                                     label={props.labelEnd}
+                                    format={props.format}
                                 />
                             </>
                         ) : (
@@ -196,6 +198,7 @@ const DateRange = (props: DateRangeProps) => {
                                     disabled={!active}
                                     slotProps={textFieldProps}
                                     label={props.labelStart}
+                                    format={props.format}
                                 />
                                 -
                                 <DatePicker
@@ -210,6 +213,7 @@ const DateRange = (props: DateRangeProps) => {
                                     disabled={!active}
                                     slotProps={textFieldProps}
                                     label={props.labelEnd}
+                                    format={props.format}
                                 />
                             </>
                         )

frontend/taipy-gui/src/components/Taipy/DateSelector.spec.tsx

@@ -96,6 +96,16 @@ describe("DateSelector Component", () => {
         expect(input).toBeInTheDocument();
         expect(cleanText(input?.value || "")).toEqual("01/01/2001");
     });
+    it("displays the default value with format", async () => {
+        render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateSelector defaultDate="2011-01-01T00:00:01.001Z" date={undefined as unknown as string} format="yy-MM-dd" />
+            </LocalizationProvider>
+        );
+        const input = document.querySelector("input");
+        expect(input).toBeInTheDocument();
+        expect(cleanText(input?.value || "")).toEqual("11-01-01");
+    });
     it("shows label", async () => {
         const { getByLabelText } = render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>
@@ -199,6 +209,16 @@ describe("DateSelector with time Component", () => {
         expect(input).toBeInTheDocument();
         expect(cleanText(input?.value || "").toLocaleLowerCase()).toEqual("01/01/2001 01:01 am");
     });
+    it("displays the default value with format", async () => {
+        render(
+            <LocalizationProvider dateAdapter={AdapterDateFns}>
+                <DateSelector defaultDate="2011-01-01T00:10:01.001Z" date={undefined as unknown as string} format="yy-MM-dd mm" />
+            </LocalizationProvider>
+        );
+        const input = document.querySelector("input");
+        expect(input).toBeInTheDocument();
+        expect(cleanText(input?.value || "")).toEqual("11-01-01 10");
+    });
     it("is disabled", async () => {
         render(
             <LocalizationProvider dateAdapter={AdapterDateFns}>

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

@@ -92,6 +92,7 @@ const DateSelector = (props: DateSelectorProps) => {
                                 disabled={!active}
                                 slotProps={textFieldProps}
                                 label={props.label}
+                                format={props.format}
                             />
                         ) : (
                             <DatePicker
@@ -101,6 +102,7 @@ const DateSelector = (props: DateSelectorProps) => {
                                 disabled={!active}
                                 slotProps={textFieldProps}
                                 label={props.label}
+                                format={props.format}
                             />
                         )
                     ) : (

frontend/taipy-gui/src/utils/index.ts

@@ -160,6 +160,9 @@ export const formatWSValue = (
         case "datetime.time":
         case "datetime":
         case "time":
+            if (value == "") {
+                return "";
+            }
             try {
                 return getDateTimeString(value.toString(), dataFormat, formatConf);
             } catch (e) {
@@ -168,6 +171,9 @@ export const formatWSValue = (
             return getDateTimeString(value.toString(), undefined, formatConf);
         case "datetime.date":
         case "date":
+            if (value == "") {
+                return "";
+            }
             try {
                 return getDateTimeString(value.toString(), dataFormat, formatConf, undefined, false);
             } catch (e) {
@@ -178,15 +184,10 @@ export const formatWSValue = (
         case "float":
         case "number":
             if (typeof value === "string") {
-                try {
-                    if (dataType === "float") {
-                        value = parseFloat(value);
-                    } else {
-                        value = parseInt(value, 10);
-                    }
-                } catch (e) {
-                    console.error("number parse exception", e);
-                    value = NaN;
+                if (dataType === "float") {
+                    value = parseFloat(value);
+                } else {
+                    value = parseInt(value, 10);
                 }
             }
             return getNumberString(value, dataFormat, formatConf);