diff --git a/package.json b/package.json
index affde61..75830e6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"uniqid": "^5.3.0",
- "web-vitals": "^1.0.1"
+ "web-vitals": "^1.0.1",
+ "yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
diff --git a/src/App.js b/src/App.js
index c070b95..d092293 100644
--- a/src/App.js
+++ b/src/App.js
@@ -65,7 +65,7 @@ function App() {
delete formikData.end;
// select the specific record, send the data to Formik, and then open the modal form
- setSelectedRecord(tableRecord);
+ setSelectedRecord(formikData);
showModal({ isEditMode: true });
}
@@ -122,14 +122,6 @@ function App() {
Table List
-
+
);
}
diff --git a/src/components/DateTimePicker.js b/src/components/DateTimePicker.js
deleted file mode 100644
index f6c1f6c..0000000
--- a/src/components/DateTimePicker.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from "react";
-import { DatePicker, TimePicker } from "antd";
-import moment from "moment";
-
-const inline = { display: "inline-block" };
-const pushRight = { marginRight: "0.25rem" };
-
-export default function DateTimePicker({ value, onChange, onBlur }) {
- const { startDate, endDate, startTime, endTime } = value;
-
- // user can't select start dates which are later than the end date
- function disabledStartDate(current) {
- if (endDate == null) {
- return false;
- } else {
- return current > endDate;
- }
- }
-
- // user can't select end dates which are earlier than the start date
- function disabledEndDate(current) {
- if (startDate == null) {
- return false;
- } else {
- return current < startDate;
- }
- }
-
- function handleStartDateChange(newDate) {
- //when datePicker is selected, set timePicker to current time
- onChange({ ...value, startDate: newDate, startTime: moment() });
- }
-
- function handleEndDateChange(newDate) {
- //when datePicker is selected, set timePicker to current time
- onChange({ ...value, endDate: newDate, endTime: moment() });
- }
-
- function handleStartTimeChange(newTime) {
- // when timePicker is cleared, set time value to 00:00:00
- if (newTime == null) {
- newTime = moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
- }
- onChange({ ...value, startTime: newTime });
- }
-
- function handleEndTimeChange(newTime) {
- // when timePicker is cleared, set time value to 00:00:00
- if (newTime == null) {
- newTime = moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
- }
-
- onChange({ ...value, endTime: newTime });
- }
-
- function handleOnBlur(isOpen) {
- // when a picker's popup is closed, trigger the onBlur
- if (!isOpen) {
- onBlur();
- }
- }
-
- return (
- <>
-
-
- {` ~ `}
-
-
-
- );
-}
diff --git a/src/components/MyForm/MyForm.js b/src/components/MyForm/MyForm.js
index 1d4bf2b..e65fa01 100644
--- a/src/components/MyForm/MyForm.js
+++ b/src/components/MyForm/MyForm.js
@@ -10,6 +10,8 @@ import {
Modal,
Row,
Button,
+ TimePicker,
+ DatePicker,
} from "antd";
import { useFormikContext } from "formik";
import {
@@ -20,7 +22,7 @@ import {
DEV_INITIAL_VALUE,
INITIAL_VALUE,
} from "../../data/const";
-import DateTimePicker from "../DateTimePicker";
+import moment from "moment";
export default function MyForm({ isEditMode, visible, onCancel }) {
const {
@@ -40,6 +42,49 @@ export default function MyForm({ isEditMode, visible, onCancel }) {
setTimeout(() => resetForm({ values: INITIAL_VALUE }), 500);
}
+ // user can't select start dates which are later than the end date
+ function disabledStartDate(current) {
+ const endDate = values?.dateTime?.endDate;
+ if (endDate == null) {
+ return false;
+ } else {
+ return current > endDate;
+ }
+ }
+
+ // user can't select end dates which are earlier than the start date
+ function disabledEndDate(current) {
+ const startDate = values?.dateTime?.startDate;
+ if (startDate == null) {
+ return false;
+ } else {
+ return current < startDate;
+ }
+ }
+
+ function handleStartDateChange(newDate) {
+ //when datePicker is selected, also set timePicker to current time
+ setValues({
+ dateTime: { ...values.dateTime, startDate: newDate, startTime: moment() },
+ });
+ }
+
+ function handleEndDateChange(newDate) {
+ //when datePicker is selected, also set timePicker to current time
+ setValues({
+ dateTime: { ...values.dateTime, endDate: newDate, endTime: moment() },
+ });
+ }
+
+ function handleTimeChange(newTime, field) {
+ // when timePicker is cleared, set time value to 00:00:00
+ if (newTime == null) {
+ newTime = moment().set({ hour: 0, minute: 0, second: 0, millisecond: 0 });
+ }
+
+ setFieldValue(field, newTime);
+ }
+
return (
@@ -62,7 +107,9 @@ export default function MyForm({ isEditMode, visible, onCancel }) {
{isEditMode ? null : (
-
+
)}