kimjh(김장현)
2 years ago
6 changed files with 120 additions and 13 deletions
@ -0,0 +1,71 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { Row, Col, Button, Card, CardBody } from 'reactstrap'; |
||||||
|
import { Search, Calendar } from 'react-feather'; |
||||||
|
import moment from 'moment'; |
||||||
|
import Flatpickr from 'react-flatpickr'; |
||||||
|
|
||||||
|
function FlightScheduleSearch() { |
||||||
|
const [date, setDate] = useState( |
||||||
|
moment().subtract('day').format('YYYY-MM-DD') |
||||||
|
); |
||||||
|
|
||||||
|
const handlerChangeDate = val => { |
||||||
|
setDate(moment(val[0]).format('YYYY-MM-DD')); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='pal-card-box'> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
|
<div> |
||||||
|
<h4>검색조건</h4> |
||||||
|
</div> |
||||||
|
<div className='d-flex align-items-center'> |
||||||
|
<Button.Ripple color='primary' size='sm' onClick={e => {}}> |
||||||
|
<Search size={16} /> |
||||||
|
검색 |
||||||
|
</Button.Ripple> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<Card> |
||||||
|
<CardBody className='pal-card-body'> |
||||||
|
<div className='search-cont'> |
||||||
|
<dl> |
||||||
|
<dt> |
||||||
|
<div className='search-box'> |
||||||
|
<div className='search-list-ti'>일자</div> |
||||||
|
<div className='search-list'> |
||||||
|
<div className='search-list-cont'> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' xl='4' md='6' sm='12'> |
||||||
|
<div className='d-flex align-items-center calendar-flat'> |
||||||
|
<Flatpickr |
||||||
|
placeholder='날짜를 선택해주세요' |
||||||
|
id='searchDate' |
||||||
|
value={date} |
||||||
|
options={{ |
||||||
|
mode: 'single' |
||||||
|
}} |
||||||
|
onChange={handlerChangeDate} |
||||||
|
className='form-control flat-picker bg-transparent border-0 shadow-none' |
||||||
|
/> |
||||||
|
<Calendar size={14} /> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</dt> |
||||||
|
</dl> |
||||||
|
</div> |
||||||
|
</CardBody> |
||||||
|
</Card> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default FlightScheduleSearch; |
@ -0,0 +1,12 @@ |
|||||||
|
import { CustomMainLayout } from '@src/components/layout/CustomMainLayout'; |
||||||
|
import FlightScheduleSearch from '@src/components/basis/flight/schedule/FlightScheduleSearch'; |
||||||
|
|
||||||
|
function FlightScheduleContainer() { |
||||||
|
return ( |
||||||
|
<CustomMainLayout title={'비행운항 스케줄'}> |
||||||
|
<FlightScheduleSearch /> |
||||||
|
</CustomMainLayout> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default FlightScheduleContainer; |
@ -0,0 +1,11 @@ |
|||||||
|
import '@styles/react/libs/flatpickr/flatpickr.scss'; |
||||||
|
import '@styles/react/libs/tables/react-dataTable-component.scss'; |
||||||
|
|
||||||
|
import '../../../../assets/css/custom.css'; |
||||||
|
import FlightScheduleContainer from '../../../../containers/basis/flight/schedule/FlightScheduleContainer'; |
||||||
|
|
||||||
|
function FlightSchedule() { |
||||||
|
return <FlightScheduleContainer />; |
||||||
|
} |
||||||
|
|
||||||
|
export default FlightSchedule; |
Loading…
Reference in new issue