feat(datepicker) add TableDatepicker

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 <DatePicker
+	       closeOnScroll={true}
+	       selected={date}
+	       onChange={onChange}
+	   >
+		<div style={{ color: "red" }}>
+		    Please select a day from the calendar!
+		</div>
+	    </DatePicker>;
+};
+
+export default Datepicker;
+Datepicker.propTypes = {
+    date: PropTypes.object,
+    onChange: PropTypes.func
+};

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 (
+	<table>
+	    <thead>
+		<tr>
+		    <th>
+			date 1:
+			<Datepicker
+			    date={dateOne}
+			    onChange={handleOnChangeDateOne}
+			/>
+		    </th>
+		    <th>date 2:
+			<Datepicker
+			    date={dateTwo}
+			    onChange={handleOnChangeDateTwo}
+			/>
+		    </th>
+		    <th>date 3:
+			<Datepicker
+			    date={dateThree}
+			    onChange={handleOnChangeDateThree}
+			/>
+		    </th>
+		</tr>
+	    </thead>
+	    <tbody>
+		<tr>
+		    <td>{dateOne.toDateString()}</td>
+		    <td>{dateTwo.toDateString()}</td>
+		    <td>{dateThree.toDateString()}</td>
+		</tr>
+		<tr>
+		    <td>{dateOne.getTime()}</td>
+		    <td>{dateTwo.getTime()}</td>
+		    <td>{dateThree.getTime()}</td>
+		</tr>
+	    </tbody>
+	</table>
+    );
+};
+
+export default TableDatepicker;

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 = () => {
 	    <Hello msg="Hello World!" />
 	    <Datepicker />
 	    <DatepickerCss />
+	    <TableDatepicker />
 	</>
     );
 }