diff --git a/datepicker/app/components/datepicker.jsx b/datepicker/app/components/datepicker.jsx
new file mode 100644
index 0000000..809d432
--- /dev/null
+++ b/datepicker/app/components/datepicker.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import PropTypes from 'prop-types';
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+//destructure props
+const Datepicker = ({date,onChange}) => {
+ return
+
+ Please select a day from the calendar!
+
+ ;
+};
+
+export default Datepicker;
+Datepicker.propTypes = {
+ date: PropTypes.object,
+ onChange: PropTypes.func
+};
diff --git a/datepicker/app/components/table-datepicker.jsx b/datepicker/app/components/table-datepicker.jsx
new file mode 100644
index 0000000..cee9bdc
--- /dev/null
+++ b/datepicker/app/components/table-datepicker.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import Datepicker from './datepicker';
+
+const TableDatepicker = () => {
+ const [dateOne, setDateOne] = useState(new Date());
+ const [dateTwo, setDateTwo] = useState(new Date());
+ const [dateThree, setDateThree] = useState(new Date());
+ const handleOnChangeDateOne = (date) => {
+ setDateOne((dateOne)=>date);
+ };
+ const handleOnChangeDateTwo = (date) => {
+ setDateTwo((dateTwo)=>date);
+ };
+ const handleOnChangeDateThree = (date) => {
+ setDateThree((dateThree)=>date);
+ };
+ return (
+
+
+
+
+ date 1:
+
+ |
+ date 2:
+
+ |
+ date 3:
+
+ |
+
+
+
+
+ {dateOne.toDateString()} |
+ {dateTwo.toDateString()} |
+ {dateThree.toDateString()} |
+
+
+ {dateOne.getTime()} |
+ {dateTwo.getTime()} |
+ {dateThree.getTime()} |
+
+
+
+ );
+};
+
+export default TableDatepicker;
diff --git a/datepicker/app/pages/home.jsx b/datepicker/app/pages/home.jsx
index 76c9935..4a29de3 100644
--- a/datepicker/app/pages/home.jsx
+++ b/datepicker/app/pages/home.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import Hello from '../components/hello';
import Datepicker from '../components/datepicker-hooks';
import DatepickerCss from '../components/datepicker-hooks-css';
+import TableDatepicker from '../components/table-datepicker';
const Home = () => {
return (
<>
@@ -10,6 +11,7 @@ const Home = () => {
+
>
);
}