정리
This commit is contained in:
@@ -1,97 +0,0 @@
|
||||
import DatePicker, { registerLocale } from 'react-datepicker';
|
||||
import { ko } from 'date-fns/esm/locale';
|
||||
import { getMonth, getYear } from 'date-fns';
|
||||
import range from 'lodash/range';
|
||||
import { months } from '../../assets/data';
|
||||
registerLocale('ko', ko);
|
||||
|
||||
const DatePickerComponent = ({ selectedDate, handleSelectedDate, pastDate, disabled, name, readOnly, maxDate, type }) => {
|
||||
const years = range(1990, getYear(new Date()) + 100, 1);
|
||||
|
||||
const parseDate = (date) => {
|
||||
if (!date) return null;
|
||||
|
||||
try {
|
||||
// 이미 Date 객체인 경우
|
||||
if (date instanceof Date) {
|
||||
return date;
|
||||
}
|
||||
|
||||
// 문자열인 경우
|
||||
if (typeof date === 'string') {
|
||||
// ISO 형식의 날짜 문자열인 경우 (예: "2025-01-03T15:00:00")
|
||||
if (date.includes('T')) {
|
||||
return new Date(date);
|
||||
}
|
||||
|
||||
// 일반 날짜 문자열인 경우 (예: "2025-01-03")
|
||||
const [year, month, day] = date.split('-').map(num => num.trim());
|
||||
return new Date(year, month - 1, day);
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('Date parsing error:', error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const parsedDate = parseDate(selectedDate);
|
||||
|
||||
return (
|
||||
<DatePicker
|
||||
onKeyDown={event => {
|
||||
if (event.keyCode === 8) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}}
|
||||
disabled={disabled}
|
||||
readOnly={readOnly}
|
||||
// selected={type !== 'retention' ? '' : parsedDate}
|
||||
selected={parsedDate}
|
||||
onChange={data => handleSelectedDate(data)}
|
||||
className="datepicker"
|
||||
placeholderText={name ? name : '검색기간 선택'}
|
||||
calendarClassName="calendar"
|
||||
dateFormat="yyyy - MM - dd"
|
||||
locale="ko"
|
||||
minDate={pastDate}
|
||||
maxDate={maxDate}
|
||||
renderCustomHeader={({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled }) => (
|
||||
<div className="calendar-top">
|
||||
<button
|
||||
className="btn-prev"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
decreaseMonth();
|
||||
}}
|
||||
disabled={prevMonthButtonDisabled}></button>
|
||||
<select value={getYear(date)} onChange={({ target: { value } }) => changeYear(value)}>
|
||||
{years.map(option => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
.
|
||||
<select value={months[getMonth(date)]} onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}>
|
||||
{months.map(option => (
|
||||
<option key={option} value={option}>
|
||||
{option}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
className="btn-next"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
increaseMonth();
|
||||
}}
|
||||
disabled={nextMonthButtonDisabled}></button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default DatePickerComponent;
|
||||
@@ -1,171 +0,0 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import DatePickerComponent from './DatePickerComponent';
|
||||
import { DatePickerWrapper } from '../../styles/Components';
|
||||
import {
|
||||
FormRowGroup,
|
||||
FormLabel,
|
||||
DateTimeGroup, DateTimeWrapper, DateContainer, StyledSelectInput, TimeSeparator, TimeContainer,
|
||||
} from '../../styles/ModuleComponents';
|
||||
import { HourList, MinuteList } from '../../assets/data';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const DateTimeRangePicker = ({
|
||||
label,
|
||||
startDate,
|
||||
endDate,
|
||||
onStartDateChange,
|
||||
onEndDateChange,
|
||||
pastDate = new Date(),
|
||||
disabled,
|
||||
startLabel = '시작 일자',
|
||||
endLabel = '종료 일자',
|
||||
reset = false,
|
||||
setAlert
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const [startHour, setStartHour] = useState('00');
|
||||
const [startMin, setStartMin] = useState('00');
|
||||
const [endHour, setEndHour] = useState('00');
|
||||
const [endMin, setEndMin] = useState('00');
|
||||
|
||||
useEffect(() => {
|
||||
if (startDate) {
|
||||
const date = new Date(startDate);
|
||||
setStartHour(String(date.getHours()).padStart(2, '0'));
|
||||
setStartMin(String(date.getMinutes()).padStart(2, '0'));
|
||||
}
|
||||
}, [startDate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (endDate) {
|
||||
const date = new Date(endDate);
|
||||
setEndHour(String(date.getHours()).padStart(2, '0'));
|
||||
setEndMin(String(date.getMinutes()).padStart(2, '0'));
|
||||
}
|
||||
}, [endDate]);
|
||||
|
||||
useEffect(() => {
|
||||
if (reset) {
|
||||
setStartHour('00');
|
||||
setStartMin('00');
|
||||
setEndHour('00');
|
||||
setEndMin('00');
|
||||
}
|
||||
}, [reset]);
|
||||
|
||||
const handleStartDate = (date) => {
|
||||
const newDate = new Date(date);
|
||||
newDate.setHours(parseInt(startHour), parseInt(startMin));
|
||||
onStartDateChange(newDate);
|
||||
};
|
||||
|
||||
const handleEndDate = (date) => {
|
||||
let newDate = new Date(date);
|
||||
newDate.setHours(parseInt(endHour), parseInt(endMin));
|
||||
|
||||
if (startDate && newDate < startDate) {
|
||||
setAlert(t('TIME_START_DIFF_END'));
|
||||
newDate = new Date(startDate);
|
||||
}
|
||||
|
||||
onEndDateChange(newDate);
|
||||
};
|
||||
|
||||
const handleStartTime = (e) => {
|
||||
const { id, value } = e.target;
|
||||
const newDate = startDate ? new Date(startDate) : new Date();
|
||||
|
||||
if (id === 'hour') {
|
||||
setStartHour(value);
|
||||
newDate.setHours(parseInt(value), parseInt(startMin));
|
||||
} else {
|
||||
setStartMin(value);
|
||||
newDate.setHours(parseInt(startHour), parseInt(value));
|
||||
}
|
||||
|
||||
onStartDateChange(newDate);
|
||||
};
|
||||
|
||||
const handleEndTime = (e) => {
|
||||
const { id, value } = e.target;
|
||||
let newDate = endDate ? new Date(endDate) : new Date();
|
||||
|
||||
if (id === 'hour') {
|
||||
setEndHour(value);
|
||||
newDate.setHours(parseInt(value), parseInt(endMin));
|
||||
} else {
|
||||
setEndMin(value);
|
||||
newDate.setHours(parseInt(endHour), parseInt(value));
|
||||
}
|
||||
|
||||
if (startDate && newDate < startDate) {
|
||||
setAlert(t('TIME_START_DIFF_END'));
|
||||
newDate = new Date(startDate)
|
||||
}
|
||||
|
||||
onEndDateChange(newDate);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormRowGroup>
|
||||
<FormLabel>{label}</FormLabel>
|
||||
<DateTimeWrapper>
|
||||
<DateTimeGroup>
|
||||
<DateContainer>
|
||||
<DatePickerWrapper>
|
||||
<DatePickerComponent
|
||||
name={startLabel}
|
||||
handleSelectedDate={handleStartDate}
|
||||
selectedDate={startDate}
|
||||
pastDate={pastDate}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</DatePickerWrapper>
|
||||
</DateContainer>
|
||||
<TimeContainer>
|
||||
<StyledSelectInput onChange={handleStartTime} id="hour" value={startHour} disabled={disabled}>
|
||||
{HourList.map(hour => (
|
||||
<option value={hour} key={hour}>{hour}</option>
|
||||
))}
|
||||
</StyledSelectInput>
|
||||
<TimeSeparator>:</TimeSeparator>
|
||||
<StyledSelectInput onChange={handleStartTime} id="min" value={startMin} disabled={disabled}>
|
||||
{MinuteList.map(min => (
|
||||
<option value={min} key={min}>{min}</option>
|
||||
))}
|
||||
</StyledSelectInput>
|
||||
</TimeContainer>
|
||||
</DateTimeGroup>
|
||||
|
||||
<DateTimeGroup>
|
||||
<DateContainer>
|
||||
<DatePickerWrapper>
|
||||
<DatePickerComponent
|
||||
name={endLabel}
|
||||
handleSelectedDate={handleEndDate}
|
||||
selectedDate={endDate}
|
||||
pastDate={pastDate}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</DatePickerWrapper>
|
||||
</DateContainer>
|
||||
<TimeContainer>
|
||||
<StyledSelectInput onChange={handleEndTime} id="hour" value={endHour} disabled={disabled}>
|
||||
{HourList.map(hour => (
|
||||
<option value={hour} key={hour}>{hour}</option>
|
||||
))}
|
||||
</StyledSelectInput>
|
||||
<TimeSeparator>:</TimeSeparator>
|
||||
<StyledSelectInput onChange={handleEndTime} id="min" value={endMin} disabled={disabled}>
|
||||
{MinuteList.map(min => (
|
||||
<option value={min} key={min}>{min}</option>
|
||||
))}
|
||||
</StyledSelectInput>
|
||||
</TimeContainer>
|
||||
</DateTimeGroup>
|
||||
</DateTimeWrapper>
|
||||
</FormRowGroup>
|
||||
);
|
||||
};
|
||||
|
||||
export default DateTimeRangePicker;
|
||||
Reference in New Issue
Block a user