Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change to material UI datepicker #134

Merged
merged 1 commit into from
Jan 17, 2024
Merged

Change to material UI datepicker #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions components/forms/DateTimeField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React from "react"
import { Control, Controller, FieldPath, FieldValues, Path, PathValue } from "react-hook-form"
import { Label, Select, SelectProps } from "flowbite-react"
import DateTimePicker from "react-datetime-picker"
import "react-datetime-picker/dist/DateTimePicker.css"
import "react-calendar/dist/Calendar.css"
import "react-clock/dist/Clock.css"
import { Value } from "react-datetime-picker/dist/cjs/shared/types"
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"
import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker"
import { createTheme, ThemeProvider } from "@mui/material/styles"
import dayjs from "dayjs"

type Props<T extends FieldValues> = {
label?: string
Expand All @@ -27,14 +27,17 @@ function DateTimeField<T extends FieldValues>({ label, name, control, rules }: P
<div className="mb-2 block">
<Label htmlFor={name} value={label} />
</div>
<DateTimePicker
id={name}
name={name}
className="font-normal text-gray-700 dark:text-gray-400"
onChange={(value: Value) => onChange(value as PathValue<T, Path<T>>)}
onBlur={onBlur}
value={value}
/>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
format="YYYY-MM-DD HH:mm"
name={name}
ampm={false}
className="font-normal bg-grey-100 dark:bg-gray-700 dark:text-gray-200"
value={dayjs(value)}
slotProps={{ openPickerIcon: { className: "bg-grey-100 dark:bg-gray-700 dark:text-gray-200" } }}
onChange={onChange}
/>
</LocalizationProvider>
</div>
)
}}
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.7.1",
"@mui/material": "^5.2.5",
"@mui/x-date-pickers": "^6.19.0",
"@next-auth/prisma-adapter": "^1.0.5",
"@prisma/client": "^4.11.0",
"@qdrant/js-client-rest": "^1.3.0",
Expand Down
164 changes: 164 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,15 @@ __metadata:
languageName: node
linkType: hard

"@babel/runtime@npm:^7.23.7":
version: 7.23.8
resolution: "@babel/runtime@npm:7.23.8"
dependencies:
regenerator-runtime: ^0.14.0
checksum: 0bd5543c26811153822a9f382fd39886f66825ff2a397a19008011376533747cd05c33a91f6248c0b8b0edf0448d7c167ebfba34786088f1b7eb11c65be7dfc3
languageName: node
linkType: hard

"@babel/types@npm:^7.22.15":
version: 7.23.5
resolution: "@babel/types@npm:7.23.5"
Expand Down Expand Up @@ -314,6 +323,15 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/core@npm:^1.5.3":
version: 1.5.3
resolution: "@floating-ui/core@npm:1.5.3"
dependencies:
"@floating-ui/utils": ^0.2.0
checksum: 72af8563e1742791acee82e86f82a0fbca7445809988d31eea3fd5771909463aa7655a6cb001cc244f8fe3a9de600420257e4dfb887ca33e2a31ac47b52e39a2
languageName: node
linkType: hard

"@floating-ui/dom@npm:^1.5.1":
version: 1.5.3
resolution: "@floating-ui/dom@npm:1.5.3"
Expand All @@ -324,6 +342,16 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/dom@npm:^1.5.4":
version: 1.5.4
resolution: "@floating-ui/dom@npm:1.5.4"
dependencies:
"@floating-ui/core": ^1.5.3
"@floating-ui/utils": ^0.2.0
checksum: 5e6f05532ff4e6daf9f2d91534184d8f942ddb8fd260c2543a49bdf0c0ff69fd0867937ce1d023126008724ac238f8fc89b5e48f82cdf9f8355a1d04edd085bd
languageName: node
linkType: hard

"@floating-ui/react-dom@npm:^2.0.1, @floating-ui/react-dom@npm:^2.0.4":
version: 2.0.4
resolution: "@floating-ui/react-dom@npm:2.0.4"
Expand All @@ -336,6 +364,18 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/react-dom@npm:^2.0.5":
version: 2.0.6
resolution: "@floating-ui/react-dom@npm:2.0.6"
dependencies:
"@floating-ui/dom": ^1.5.4
peerDependencies:
react: ">=16.8.0"
react-dom: ">=16.8.0"
checksum: 3608537be6cae5f0442d3f826379b8e4a9ce5c4bdecf1d2b34e6709842d80444be1a00eca3641d680e2e6405d833092f58005d1b120a9d39ffd341c60b0c017c
languageName: node
linkType: hard

"@floating-ui/react@npm:^0.24.3":
version: 0.24.8
resolution: "@floating-ui/react@npm:0.24.8"
Expand All @@ -357,6 +397,13 @@ __metadata:
languageName: node
linkType: hard

"@floating-ui/utils@npm:^0.2.0":
version: 0.2.1
resolution: "@floating-ui/utils@npm:0.2.1"
checksum: 9ed4380653c7c217cd6f66ae51f20fdce433730dbc77f95b5abfb5a808f5fdb029c6ae249b4e0490a816f2453aa6e586d9a873cd157fdba4690f65628efc6e06
languageName: node
linkType: hard

"@hapi/hoek@npm:^9.0.0":
version: 9.3.0
resolution: "@hapi/hoek@npm:9.3.0"
Expand Down Expand Up @@ -613,6 +660,28 @@ __metadata:
languageName: node
linkType: hard

"@mui/base@npm:^5.0.0-beta.22":
version: 5.0.0-beta.31
resolution: "@mui/base@npm:5.0.0-beta.31"
dependencies:
"@babel/runtime": ^7.23.7
"@floating-ui/react-dom": ^2.0.5
"@mui/types": ^7.2.13
"@mui/utils": ^5.15.4
"@popperjs/core": ^2.11.8
clsx: ^2.1.0
prop-types: ^15.8.1
peerDependencies:
"@types/react": ^17.0.0 || ^18.0.0
react: ^17.0.0 || ^18.0.0
react-dom: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: c1b9c4bfab9b8d5053c9e5cb534f9151aad3a084c00cd06195af311f1b46e2782f23cf94c40f8d2fc6568dad5bf83da62dd476ab32439305fcd33a1565b5e347
languageName: node
linkType: hard

"@mui/core-downloads-tracker@npm:^5.14.19":
version: 5.14.19
resolution: "@mui/core-downloads-tracker@npm:5.14.19"
Expand Down Expand Up @@ -731,6 +800,36 @@ __metadata:
languageName: node
linkType: hard

"@mui/types@npm:^7.2.13":
version: 7.2.13
resolution: "@mui/types@npm:7.2.13"
peerDependencies:
"@types/react": ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 58dfc96f9654288519ff01d6b54e6a242f05cadad51210deb85710a81be4fa1501a116c8968e2614b16c748fc1f407dc23beeeeae70fa37fceb6c6de876ff70d
languageName: node
linkType: hard

"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.4":
version: 5.15.4
resolution: "@mui/utils@npm:5.15.4"
dependencies:
"@babel/runtime": ^7.23.7
"@types/prop-types": ^15.7.11
prop-types: ^15.8.1
react-is: ^18.2.0
peerDependencies:
"@types/react": ^17.0.0 || ^18.0.0
react: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
checksum: b23f57a08c04ba600a50906778c7bb809652b6cc9806bce2423decfd6154a5af25812ebf4b5bb6bf61218bcf399c2aea53948bc58e42f7868e90ea3d2e7005b3
languageName: node
linkType: hard

"@mui/utils@npm:^5.14.19":
version: 5.14.19
resolution: "@mui/utils@npm:5.14.19"
Expand All @@ -749,6 +848,54 @@ __metadata:
languageName: node
linkType: hard

"@mui/x-date-pickers@npm:^6.19.0":
version: 6.19.0
resolution: "@mui/x-date-pickers@npm:6.19.0"
dependencies:
"@babel/runtime": ^7.23.2
"@mui/base": ^5.0.0-beta.22
"@mui/utils": ^5.14.16
"@types/react-transition-group": ^4.4.8
clsx: ^2.0.0
prop-types: ^15.8.1
react-transition-group: ^4.4.5
peerDependencies:
"@emotion/react": ^11.9.0
"@emotion/styled": ^11.8.1
"@mui/material": ^5.8.6
"@mui/system": ^5.8.0
date-fns: ^2.25.0 || ^3.2.0
date-fns-jalali: ^2.13.0-0
dayjs: ^1.10.7
luxon: ^3.0.2
moment: ^2.29.4
moment-hijri: ^2.1.2
moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
react: ^17.0.0 || ^18.0.0
react-dom: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@emotion/react":
optional: true
"@emotion/styled":
optional: true
date-fns:
optional: true
date-fns-jalali:
optional: true
dayjs:
optional: true
luxon:
optional: true
moment:
optional: true
moment-hijri:
optional: true
moment-jalaali:
optional: true
checksum: 65da961de3012c1453ce7589c836fac0808fdfe00aa90311d5e11b2a2197c2aa61930200fded61598e5ec86f6fef1c683951078a623e18ee5f4c129b5a760545
languageName: node
linkType: hard

"@next-auth/prisma-adapter@npm:^1.0.5":
version: 1.0.7
resolution: "@next-auth/prisma-adapter@npm:1.0.7"
Expand Down Expand Up @@ -2628,6 +2775,15 @@ __metadata:
languageName: node
linkType: hard

"@types/react-transition-group@npm:^4.4.8":
version: 4.4.10
resolution: "@types/react-transition-group@npm:4.4.10"
dependencies:
"@types/react": "*"
checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c
languageName: node
linkType: hard

"@types/react-transition-group@npm:^4.4.9":
version: 4.4.9
resolution: "@types/react-transition-group@npm:4.4.9"
Expand Down Expand Up @@ -3700,6 +3856,13 @@ __metadata:
languageName: node
linkType: hard

"clsx@npm:^2.1.0":
version: 2.1.0
resolution: "clsx@npm:2.1.0"
checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
languageName: node
linkType: hard

"color-convert@npm:^1.9.0":
version: 1.9.3
resolution: "color-convert@npm:1.9.3"
Expand Down Expand Up @@ -5801,6 +5964,7 @@ __metadata:
"@emotion/react": ^11.7.1
"@emotion/styled": ^11.7.1
"@mui/material": ^5.2.5
"@mui/x-date-pickers": ^6.19.0
"@next-auth/prisma-adapter": ^1.0.5
"@panva/hkdf": ^1.1.1
"@prisma/client": ^4.11.0
Expand Down