feat(datepicker) add TableDatepicker
This commit is contained in:
parent
2535c809a6
commit
6666665d55
|
@ -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
|
||||||
|
};
|
|
@ -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;
|
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import Hello from '../components/hello';
|
import Hello from '../components/hello';
|
||||||
import Datepicker from '../components/datepicker-hooks';
|
import Datepicker from '../components/datepicker-hooks';
|
||||||
import DatepickerCss from '../components/datepicker-hooks-css';
|
import DatepickerCss from '../components/datepicker-hooks-css';
|
||||||
|
import TableDatepicker from '../components/table-datepicker';
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
@ -10,6 +11,7 @@ const Home = () => {
|
||||||
<Hello msg="Hello World!" />
|
<Hello msg="Hello World!" />
|
||||||
<Datepicker />
|
<Datepicker />
|
||||||
<DatepickerCss />
|
<DatepickerCss />
|
||||||
|
<TableDatepicker />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue