{
onChange?.(newDate);
}}
+ customInput={
+
+ }
+ onMonthChange={(newDate) => {
+ onChange?.(newDate);
+ }}
+ onYearChange={(newDate) => {
+ onChange?.(newDate);
+ }}
renderCustomHeader={({
decreaseMonth,
increaseMonth,
@@ -345,7 +393,9 @@ export const InternalDatePicker = ({
onChange={onChange}
/>
-
+ {isDateTimeInput && (
+
+ )}
+
+ {monthLabel} - {yearLabel}
+
>
)}
- customInput={<>>}
onSelect={(date: Date, event) => {
const dateUTC = DateTime.fromJSDate(date, {
zone: 'utc',
@@ -374,8 +426,7 @@ export const InternalDatePicker = ({
onChange?.(dateUTC);
}
}}
- onClickOutside={handleClickOutside}
- >
+ />
{clearable && (
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/MonthAndYearDropdown.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/MonthAndYearDropdown.tsx
index d92abebd78..a07b65eb51 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/MonthAndYearDropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/MonthAndYearDropdown.tsx
@@ -1,6 +1,5 @@
import { IconCalendarDue } from 'twenty-ui';
-import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { Select } from '@/ui/input/components/Select';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@@ -57,7 +56,7 @@ export const MonthAndYearDropdown = ({
{
}).format(parsedJSDate);
};
+export const formatToHumanReadableDateTime = (date: Date | string) => {
+ const parsedJSDate = parseDate(date).toJSDate();
+
+ return new Intl.DateTimeFormat(undefined, {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: 'numeric',
+ minute: 'numeric',
+ }).format(parsedJSDate);
+};
+
export const sanitizeURL = (link: string | null | undefined) => {
return link
? link.replace(/(https?:\/\/)|(www\.)/g, '').replace(/\/$/, '')
diff --git a/yarn.lock b/yarn.lock
index 22595c1ce1..ce3bbc7e7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5533,6 +5533,20 @@ __metadata:
languageName: node
linkType: hard
+"@floating-ui/react@npm:^0.26.2":
+ version: 0.26.12
+ resolution: "@floating-ui/react@npm:0.26.12"
+ dependencies:
+ "@floating-ui/react-dom": "npm:^2.0.0"
+ "@floating-ui/utils": "npm:^0.2.0"
+ tabbable: "npm:^6.0.0"
+ peerDependencies:
+ react: ">=16.8.0"
+ react-dom: ">=16.8.0"
+ checksum: f47e133b9fe5dd404886c4e69e760dc0d6ab30774de82b5547cba83d0cd6e7a3bb4c221587e115a3c0c466ac344578c3db78b5808b5acd70ae5d43d587de9fd1
+ languageName: node
+ linkType: hard
+
"@floating-ui/react@npm:^0.26.4":
version: 0.26.8
resolution: "@floating-ui/react@npm:0.26.8"
@@ -5554,7 +5568,7 @@ __metadata:
languageName: node
linkType: hard
-"@floating-ui/utils@npm:^0.2.1":
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
version: 0.2.1
resolution: "@floating-ui/utils@npm:0.2.1"
checksum: ee77756712cf5b000c6bacf11992ffb364f3ea2d0d51cc45197a7e646a17aeb86ea4b192c0b42f3fbb29487aee918a565e84f710b8c3645827767f406a6b4cc9
@@ -9791,7 +9805,7 @@ __metadata:
languageName: node
linkType: hard
-"@popperjs/core@npm:^2.11.8, @popperjs/core@npm:^2.9.0, @popperjs/core@npm:^2.9.2":
+"@popperjs/core@npm:^2.9.0":
version: 2.11.8
resolution: "@popperjs/core@npm:2.11.8"
checksum: 4681e682abc006d25eb380d0cf3efc7557043f53b6aea7a5057d0d1e7df849a00e281cd8ea79c902a35a414d7919621fc2ba293ecec05f413598e0b23d5a1e63
@@ -16975,15 +16989,14 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-datepicker@npm:^4.11.2":
- version: 4.19.5
- resolution: "@types/react-datepicker@npm:4.19.5"
+"@types/react-datepicker@npm:^6.2.0":
+ version: 6.2.0
+ resolution: "@types/react-datepicker@npm:6.2.0"
dependencies:
- "@popperjs/core": "npm:^2.9.2"
+ "@floating-ui/react": "npm:^0.26.2"
"@types/react": "npm:*"
- date-fns: "npm:^2.0.1"
- react-popper: "npm:^2.2.5"
- checksum: 8b3402338e842a2d5c4d4c0ceefc9fc280607662d9073db860b59e31a3b3977eec6ec3d36b388ec5a3a3874adec00ab0f6a9405cd0de1f8dcf75de3328a84eb8
+ date-fns: "npm:^3.3.1"
+ checksum: 40342f0a5e15bac6f2b35072a2f7041db20b924692123aface78f2cbf0e896c0c02c299a9173583e01e5b6dad38e3da86ad0e56e943e74e0c0dc7d5c60129bdf
languageName: node
linkType: hard
@@ -22376,7 +22389,7 @@ __metadata:
languageName: node
linkType: hard
-"clsx@npm:^2.0.0":
+"clsx@npm:^2.0.0, clsx@npm:^2.1.0":
version: 2.1.0
resolution: "clsx@npm:2.1.0"
checksum: c09c00ad14f638366ca814097e6cab533dfa1972a358da5b557be487168acbb25b4c1395e89ffa842a8a61ba87a462d2b4885bc9d4f8410b598f3cb339599cdb
@@ -23986,7 +23999,7 @@ __metadata:
languageName: node
linkType: hard
-"date-fns@npm:^2.0.1, date-fns@npm:^2.30.0":
+"date-fns@npm:^2.30.0":
version: 2.30.0
resolution: "date-fns@npm:2.30.0"
dependencies:
@@ -23995,6 +24008,13 @@ __metadata:
languageName: node
linkType: hard
+"date-fns@npm:^3.3.1":
+ version: 3.6.0
+ resolution: "date-fns@npm:3.6.0"
+ checksum: 0b5fb981590ef2f8e5a3ba6cd6d77faece0ea7f7158948f2eaae7bbb7c80a8f63ae30b01236c2923cf89bb3719c33aeb150c715ea4fe4e86e37dcf06bed42fb6
+ languageName: node
+ linkType: hard
+
"dateformat@npm:^4.5.0":
version: 4.6.3
resolution: "dateformat@npm:4.6.3"
@@ -40815,20 +40835,19 @@ __metadata:
languageName: node
linkType: hard
-"react-datepicker@npm:^4.11.0":
- version: 4.25.0
- resolution: "react-datepicker@npm:4.25.0"
+"react-datepicker@npm:^6.7.1":
+ version: 6.7.1
+ resolution: "react-datepicker@npm:6.7.1"
dependencies:
- "@popperjs/core": "npm:^2.11.8"
- classnames: "npm:^2.2.6"
- date-fns: "npm:^2.30.0"
+ "@floating-ui/react": "npm:^0.26.2"
+ clsx: "npm:^2.1.0"
+ date-fns: "npm:^3.3.1"
prop-types: "npm:^15.7.2"
react-onclickoutside: "npm:^6.13.0"
- react-popper: "npm:^2.3.0"
peerDependencies:
react: ^16.9.0 || ^17 || ^18
react-dom: ^16.9.0 || ^17 || ^18
- checksum: 714fc6cffdf9fa76d1a74581375acb4c86ac81e6c2cde372448ab447370b7e9ffb1840cf388020485028e7b0f43edf82c1cfd2dab7d2c6b964cdd6f4dd560e92
+ checksum: 9029c358254ef011e3a6b82fd542a87efa30a67b7aa2814178d28354e2b18f69b863861fb852f236a91be57a0b684455c9127c87232b7ed2f4fae6737e3248e6
languageName: node
linkType: hard
@@ -40957,7 +40976,7 @@ __metadata:
languageName: node
linkType: hard
-"react-fast-compare@npm:3.2.2, react-fast-compare@npm:^3.0.1, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
+"react-fast-compare@npm:3.2.2, react-fast-compare@npm:^3.2.0, react-fast-compare@npm:^3.2.2":
version: 3.2.2
resolution: "react-fast-compare@npm:3.2.2"
checksum: 0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
@@ -41157,20 +41176,6 @@ __metadata:
languageName: node
linkType: hard
-"react-popper@npm:^2.2.5, react-popper@npm:^2.3.0":
- version: 2.3.0
- resolution: "react-popper@npm:2.3.0"
- dependencies:
- react-fast-compare: "npm:^3.0.1"
- warning: "npm:^4.0.2"
- peerDependencies:
- "@popperjs/core": ^2.0.0
- react: ^16.8.0 || ^17 || ^18
- react-dom: ^16.8.0 || ^17 || ^18
- checksum: 23f93540537ca4c035425bb8d5e51b11131fbc921d7ac1d041d0ae557feac8c877f3a012d36b94df8787803f52ed81e6df9257ac9e58719875f7805518d6db3f
- languageName: node
- linkType: hard
-
"react-query@npm:^3.34.19":
version: 3.39.3
resolution: "react-query@npm:3.39.3"
@@ -45046,7 +45051,7 @@ __metadata:
languageName: node
linkType: hard
-"tabbable@npm:^6.0.1, tabbable@npm:^6.2.0":
+"tabbable@npm:^6.0.0, tabbable@npm:^6.0.1, tabbable@npm:^6.2.0":
version: 6.2.0
resolution: "tabbable@npm:6.2.0"
checksum: ced8b38f05f2de62cd46836d77c2646c42b8c9713f5bd265daf0e78ff5ac73d3ba48a7ca45f348bafeef29b23da7187c72250742d37627883ef89cbd7fa76898
@@ -46222,7 +46227,7 @@ __metadata:
"@types/passport-google-oauth20": "npm:^2.0.11"
"@types/passport-jwt": "npm:^3.0.8"
"@types/react": "npm:^18.2.39"
- "@types/react-datepicker": "npm:^4.11.2"
+ "@types/react-datepicker": "npm:^6.2.0"
"@types/react-dom": "npm:^18.2.15"
"@types/scroll-into-view": "npm:^1.16.0"
"@types/supertest": "npm:^2.0.11"
@@ -46346,7 +46351,7 @@ __metadata:
raw-loader: "npm:^4.0.2"
react: "npm:^18.2.0"
react-data-grid: "npm:7.0.0-beta.13"
- react-datepicker: "npm:^4.11.0"
+ react-datepicker: "npm:^6.7.1"
react-dom: "npm:^18.2.0"
react-dropzone: "npm:^14.2.3"
react-error-boundary: "npm:^4.0.11"
@@ -48240,7 +48245,7 @@ __metadata:
languageName: node
linkType: hard
-"warning@npm:^4.0.2, warning@npm:^4.0.3":
+"warning@npm:^4.0.3":
version: 4.0.3
resolution: "warning@npm:4.0.3"
dependencies: