59 lines
1.3 KiB
JavaScript
59 lines
1.3 KiB
JavaScript
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;
|