Date picker for Date and DateTime field input (#4981)

- Implemented correct mask for Date and DateTime field in
InternalDatePicker
- Use only keyDown event and click outside in InternalDatePicker and
DateInput
- Refactored InternalDatePicker UI to have month and year displayed
- Fixed bug and synchronized date value between the different inputs
that can change it

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
This commit is contained in:
Lucas Bordeau
2024-04-16 16:58:08 +02:00
committed by GitHub
parent d63937ec6f
commit 19a3be7b1b
22 changed files with 261 additions and 122 deletions

View File

@ -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: