Commit c97d4382 authored by Kim, Subin's avatar Kim, Subin
Browse files

DatePicker 수정 완료

parent 50bb1b1b
...@@ -103,7 +103,7 @@ const AdminMonthly = () => { ...@@ -103,7 +103,7 @@ const AdminMonthly = () => {
themeSystem='bootstrap' themeSystem='bootstrap'
height='78vh' height='78vh'
/> />
<DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} pickerShow={pickerShow} setPickerShow={setPickerShow} /> <DatePickerModal initialDate={initialDate} changeDate={changeDate} setChangeDate={setChangeDate} show={pickerShow} setShow={setPickerShow} />
<ScheduleModal dateShow={dateShow} setDateShow={setDateShow} /> <ScheduleModal dateShow={dateShow} setDateShow={setDateShow} />
</> </>
) )
......
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import moment from 'moment'; import moment from 'moment';
const DatePickerModal = ({ initialDate, changeDate, setChangeDate, pickerShow, setPickerShow }) => { const DatePickerModal = ({ initialDate, changeDate, setChangeDate, show, setShow }) => {
const [date, setDate] = useState({ year: moment(changeDate).get('year'), month: moment(changeDate).get('month') + 1 }) const [date, setDate] = useState({ year: moment(changeDate).get('year'), month: moment(changeDate).get('month') + 1 })
const [year, setYear] = useState({ start: moment(initialDate).get('year') - 3, end: moment(initialDate).get('year') + 3 }) const [year, setYear] = useState({ start: moment(initialDate).get('year') - 3, end: moment(initialDate).get('year') + 3 })
const month = moment(initialDate).get('month') + 1 const month = moment(initialDate).get('month') + 1
...@@ -32,7 +32,7 @@ const DatePickerModal = ({ initialDate, changeDate, setChangeDate, pickerShow, s ...@@ -32,7 +32,7 @@ const DatePickerModal = ({ initialDate, changeDate, setChangeDate, pickerShow, s
function cancel() { function cancel() {
setDate({ year: moment(changeDate).get('year'), month: moment(changeDate).get('month') + 1 }) setDate({ year: moment(changeDate).get('year'), month: moment(changeDate).get('month') + 1 })
setPickerShow(false) setShow(false)
} }
function handleClick() { function handleClick() {
...@@ -41,26 +41,26 @@ const DatePickerModal = ({ initialDate, changeDate, setChangeDate, pickerShow, s ...@@ -41,26 +41,26 @@ const DatePickerModal = ({ initialDate, changeDate, setChangeDate, pickerShow, s
else { else {
let dateStr = date.year + "-" + date.month + "-01" let dateStr = date.year + "-" + date.month + "-01"
setChangeDate(moment(dateStr).format("YYYY-MM-DD")) setChangeDate(moment(dateStr).format("YYYY-MM-DD"))
setPickerShow(false) setShow(false)
} }
} else if (date.year === year.end) { } else if (date.year === year.end) {
if (month < date.month) alert("선택하신 날짜는 유효하지 않습니다. 다시 선택해주세요.") if (month < date.month) alert("선택하신 날짜는 유효하지 않습니다. 다시 선택해주세요.")
else { else {
let dateStr = date.year + "-" + date.month + "-01" let dateStr = date.year + "-" + date.month + "-01"
setChangeDate(moment(dateStr).format("YYYY-MM-DD")) setChangeDate(moment(dateStr).format("YYYY-MM-DD"))
setPickerShow(false) setShow(false)
} }
} else { } else {
let dateStr = date.year + "-" + date.month + "-01" let dateStr = date.year + "-" + date.month + "-01"
setChangeDate(moment(dateStr).format("YYYY-MM-DD")) setChangeDate(moment(dateStr).format("YYYY-MM-DD"))
setPickerShow(false) setShow(false)
} }
} }
return ( return (
<> <>
{pickerShow ? <div className="offcanvas-backdrop fade show"></div> : null} {show ? <div className="offcanvas-backdrop fade show"></div> : null}
<div className={"offcanvas offcanvas-bottom " + (pickerShow ? "visible show" : "invisiblel")} tabIndex="-1" id="datePicker" aria-labelledby="datePicker"> <div className={"offcanvas offcanvas-bottom " + (show ? "visible show" : "invisiblel")} tabIndex="-1" id="datePicker" aria-labelledby="datePicker">
<div className="offcanvas-body small py-2"> <div className="offcanvas-body small py-2">
<div className="d-flex my-3"> <div className="d-flex my-3">
<div className="col-6 d-flex flex-column justify-content-between align-items-center fs-4"> <div className="col-6 d-flex flex-column justify-content-between align-items-center fs-4">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment