Skip to content

Commit

Permalink
replaced react-datetime with @material-ui/pickers issue bench-routes#34
Browse files Browse the repository at this point in the history
rohit-raje-786 committed Jan 21, 2022
1 parent 34b9382 commit 65e4bb6
Showing 4 changed files with 285 additions and 36 deletions.
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -5,9 +5,12 @@
"dependencies": {
"@chakra-ui/icons": "^1.0.13",
"@chakra-ui/react": "^1.0.0",
"@date-io/date-fns": "^1.3.13",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@faker-js/faker": "^5.5.3",
"@material-ui/core": "^4.12.3",
"@material-ui/pickers": "^3.3.10",
"@testing-library/jest-dom": "^5.9.0",
"@testing-library/react": "^10.2.1",
"@testing-library/user-event": "^12.0.2",
@@ -18,12 +21,11 @@
"@types/react-virtualized-auto-sizer": "^1.0.0",
"@types/react-window": "^1.8.3",
"axios": "^0.21.1",
"date-fns": "^2.28.0",
"dayjs": "^1.10.7",
"framer-motion": "^4.0.0",
"moment": "^2.29.1",
"puppeteer": "^10.1.0",
"react": "^17.0.2",
"react-datetime": "^3.0.4",
"react-dayjs-picker": "^1.3.0",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
52 changes: 35 additions & 17 deletions src/components/TimeQuerier/index.tsx
Original file line number Diff line number Diff line change
@@ -13,10 +13,14 @@ import {
Alert,
AlertIcon,
} from "@chakra-ui/react";
import Datetime from "react-datetime";
import constants from "../../utils/constants";
import { useTimeQuerierStore } from "../../store/timeQuerier";
import dayjs from "dayjs";
import DateFnsUtils from "@date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker,
} from "@material-ui/pickers";

const TimeQuerier: React.FC = () => {
const styles = useStyleConfig("DateTime", {});
@@ -77,14 +81,21 @@ const TimeQuerier: React.FC = () => {
>
<Text>Start Time</Text>
<Box sx={styles}>
<Datetime
value={startTime}
dateFormat={dateFormat}
timeFormat={timeFormat}
inputProps={{ className: "custom-datepicker start-time" }}
onChange={handleStartChange}
isValidDate={valid}
/>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
value={startTime}
isValidDate={valid}
onChange={handleStartChange}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
</Box>
</Box>
<Box
@@ -96,14 +107,21 @@ const TimeQuerier: React.FC = () => {
>
<Text>End Time</Text>
<Box sx={styles}>
<Datetime
value={endTime}
dateFormat={dateFormat}
timeFormat={timeFormat}
inputProps={{ className: "custom-datepicker end-time" }}
onChange={handleEndChange}
isValidDate={valid}
/>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
value={endTime}
isValidDate={valid}
onChange={handleEndChange}
KeyboardButtonProps={{
"aria-label": "change date",
}}
/>
</MuiPickersUtilsProvider>
</Box>
</Box>
<Box
1 change: 0 additions & 1 deletion src/theme/index.ts
Original file line number Diff line number Diff line change
@@ -9,7 +9,6 @@ import { Heading } from "./components/Heading";
import { extendTheme } from "@chakra-ui/react";
// Global style overrides
import styles from "./global";
import "react-datetime/css/react-datetime.css";
//Branding style ovverides
import branding from "./branding";

Loading

0 comments on commit 65e4bb6

Please sign in to comment.