diff --git a/package/CHANGE.md b/package/CHANGE.md index 1da9a1b..e1739ae 100644 --- a/package/CHANGE.md +++ b/package/CHANGE.md @@ -1,3 +1,8 @@ +## 2.2.0 + +- InputUnit에 focus시 datepicker가 자동으로 열리지 않고 Trigger버튼이 추가되었습니다. (이벤트간 충돌 Fix) +- 0~100년 구간의 value가 정상적으로 입력되지 않던 현상을 수정했습니다. + ## 2.1.0 - hourStep, minuteStep, secondStep 옵션이 사라지고 timeStep 옵션으로 합쳐집니다. diff --git a/package/package.json b/package/package.json index ab3d4c9..c051ecf 100644 --- a/package/package.json +++ b/package/package.json @@ -1,6 +1,6 @@ { "name": "@shinyongjun/react-datepicker", - "version": "2.1.6", + "version": "2.2.0", "main": "./dist/cjs/index.js", "module": "./dist/esm/index.js", "source": "./src/index.tsx", diff --git a/package/src/assets/global.css b/package/src/assets/global.css index a39c6a1..a16434d 100644 --- a/package/src/assets/global.css +++ b/package/src/assets/global.css @@ -26,13 +26,6 @@ .react-datepicker__input-range-separator { margin-inline: 4px; } -.react-datepicker__trigger-button { - position: absolute; - inset: 0; - background-color: transparent; - border: none; - box-shadow: none; -} .react-datepicker__input-unit { position: relative; outline: none; @@ -61,6 +54,9 @@ background-color: transparent; font-size: 0; cursor: pointer; + &:disabled { + cursor: default; + } } /* portal */ diff --git a/package/src/components/Datepicker.tsx b/package/src/components/Datepicker.tsx index 78916a0..7e6755d 100644 --- a/package/src/components/Datepicker.tsx +++ b/package/src/components/Datepicker.tsx @@ -101,8 +101,8 @@ function Datepicker({ if (!value) return; const newDate = new Date( - value.getFullYear(), - value.getMonth(), + -1, + setMonthPage(`${value.getFullYear() + 2}-${value.getMonth()}`), value.getDate(), timeValue.hour, timeValue.minute, @@ -124,8 +124,8 @@ function Datepicker({ } const newDate = new Date( - Number(dateValue.year), - Number(dateValue.month), + -1, + setMonthPage(`${dateValue.year + 2}-${dateValue.month}`), Number(dateValue.date), timeValue.hour, timeValue.minute, @@ -141,17 +141,16 @@ function Datepicker({ }, [value]); // browser에서 focus가 사라졌을 때 picker close - const windowBlurHandler = () => { - setIsVisible(false); - }; - - useEffect(() => { - window.addEventListener('blur', windowBlurHandler); - // return window.removeEventListener('blur', windowBlurHandler); - return () => { - window.removeEventListener('blur', windowBlurHandler); - }; - }, []); + // const windowBlurHandler = () => { + // setIsVisible(false); + // }; + + // useEffect(() => { + // window.addEventListener('blur', windowBlurHandler); + // return () => { + // window.removeEventListener('blur', windowBlurHandler); + // }; + // }, []); return (
diff --git a/package/src/components/Rangepicker.tsx b/package/src/components/Rangepicker.tsx index 9bcd002..652098a 100644 --- a/package/src/components/Rangepicker.tsx +++ b/package/src/components/Rangepicker.tsx @@ -140,8 +140,8 @@ export default function Rangepicker({ if (!startValue) return; const newDate = new Date( - startValue.getFullYear(), - startValue.getMonth(), + -1, + setMonthPage(`${startValue.getFullYear() + 2}-${startValue.getMonth()}`), startValue.getDate(), timeStartValue.hour, timeStartValue.minute, @@ -164,8 +164,8 @@ export default function Rangepicker({ } const newDate = new Date( - Number(dateStartValue.year), - Number(dateStartValue.month), + -1, + setMonthPage(`${dateStartValue.year + 2}-${dateStartValue.month}`), Number(dateStartValue.date), timeStartValue.hour, timeStartValue.minute, @@ -181,8 +181,8 @@ export default function Rangepicker({ if (!endValue) return; const newDate = new Date( - endValue.getFullYear(), - endValue.getMonth(), + -1, + setMonthPage(`${endValue.getFullYear() + 2}-${endValue.getMonth()}`), endValue.getDate(), timeEndValue.hour, timeEndValue.minute, @@ -205,8 +205,8 @@ export default function Rangepicker({ } const newDate = new Date( - Number(dateEndValue.year), - Number(dateEndValue.month), + -1, + setMonthPage(`${dateEndValue.year + 2}-${dateEndValue.month}`), Number(dateEndValue.date), timeEndValue.hour, timeEndValue.minute, @@ -237,6 +237,18 @@ export default function Rangepicker({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [startValue, endValue]); + // browser에서 focus가 사라졌을 때 picker close + // const windowBlurHandler = () => { + // setIsVisible(false); + // }; + + // useEffect(() => { + // window.addEventListener('blur', windowBlurHandler); + // return () => { + // window.removeEventListener('blur', windowBlurHandler); + // }; + // }, []); + return (
void; } -function DatepicerMonth({ +export default function DatepickerMonth({ dateValue, setDateValue, valueFormat, @@ -111,5 +111,3 @@ function DatepicerMonth({
); } - -export default DatepicerMonth; diff --git a/package/src/components/input/DatepickerInput.tsx b/package/src/components/input/DatepickerInput.tsx index 112cd1d..e0e754d 100644 --- a/package/src/components/input/DatepickerInput.tsx +++ b/package/src/components/input/DatepickerInput.tsx @@ -65,6 +65,7 @@ export default function DatepickerInput({ type="button" className={`${NAME_SPACE}__trigger`} onClick={triggerHandler} + disabled={disabled} > Trigger diff --git a/package/src/components/input/InputUnit.tsx b/package/src/components/input/InputUnit.tsx index 907f314..13754b1 100644 --- a/package/src/components/input/InputUnit.tsx +++ b/package/src/components/input/InputUnit.tsx @@ -126,7 +126,7 @@ function InputUnit({ } const conditions = { - YYYY: Number(value) > 9999 ? '9999' : addLeadingZero(value), + YYYY: Number(value) > 9999 ? '9999' : value, MM: Number(value) > 12 ? '12' : addLeadingZero(value), DD: Number(value) > 31 ? '31' : addLeadingZero(value), hh: Number(value) > 23 ? '23' : addLeadingZero(value), diff --git a/package/src/components/input/RangepickerInput.tsx b/package/src/components/input/RangepickerInput.tsx index c78cc77..49d7b78 100644 --- a/package/src/components/input/RangepickerInput.tsx +++ b/package/src/components/input/RangepickerInput.tsx @@ -84,6 +84,7 @@ export default function RangepickerInput({ type="button" className={`${NAME_SPACE}__trigger`} onClick={() => triggerHandler('start')} + disabled={disabled} > Trigger @@ -112,6 +113,7 @@ export default function RangepickerInput({ type="button" className={`${NAME_SPACE}__trigger`} onClick={() => triggerHandler('end')} + disabled={disabled} > Trigger diff --git a/package/src/components/rangepicker/Month.tsx b/package/src/components/rangepicker/Month.tsx index 8d4f9d8..a5828f8 100644 --- a/package/src/components/rangepicker/Month.tsx +++ b/package/src/components/rangepicker/Month.tsx @@ -4,6 +4,7 @@ import { useMemo } from 'react'; import { NAME_SPACE } from '../../constants/core'; import { IDateValue, ITimeValue, TIsVisible } from '../../types/props'; import { formatDate, formatDateValue } from '../../utils/datetime'; +import { setMonthPage } from '../../utils/page'; interface Iprops { type: TIsVisible; @@ -33,6 +34,14 @@ export default function RangepickerMonth({ const lastDate = lastDateValue.getDate(); // 이달 말 일 const lastDay = lastDateValue.getDay(); // 이달 말 일의 요일 const prevLastDate = new Date(year, month - 1, 0).getDate(); // 이전달의 말 일 + const startValue = useMemo( + () => (type === 'start' ? dateValue : pairValue), + [dateValue, pairValue, type] + ); + const endValue = useMemo( + () => (type === 'end' ? dateValue : pairValue), + [dateValue, pairValue, type] + ); const formatedDateValue = useMemo( () => formatDateValue(dateValue, timeValue, valueFormat), [dateValue, timeValue, valueFormat] @@ -48,6 +57,17 @@ export default function RangepickerMonth({ return type === 'end' ? formatedDateValue : formatedPairValue; }, [formatedDateValue, formatedPairValue, type]); + const parsedValueToDate = (value: IDateValue) => { + return new Date( + -1, + setMonthPage(`${value.year! + 2}-${value.month!}`), + value.date!, + timeValue.hour, + timeValue.minute, + timeValue.second + ); + }; + const renderDateButton = ( month: number, date: number, @@ -93,10 +113,10 @@ export default function RangepickerMonth({ data-start-active={formatedStartValue === formatedThisValue} data-end-active={formatedEndValue === formatedThisValue} data-range-active={ - formatedStartValue && - formatedEndValue && - buttonDate > new Date(formatedStartValue) && - buttonDate < new Date(formatedEndValue) + startValue && + endValue && + buttonDate > parsedValueToDate(startValue) && + buttonDate < parsedValueToDate(endValue) } onClick={handleClick} > diff --git a/package/src/utils/datetime.ts b/package/src/utils/datetime.ts index 3513a24..f2dbfe2 100644 --- a/package/src/utils/datetime.ts +++ b/package/src/utils/datetime.ts @@ -1,4 +1,5 @@ import { IDateValue, ITimeValue } from '../types/props'; +import { setMonthPage } from './page'; import { addLeadingZero } from './string'; export const toLocalISOString = (date: Date): string => { @@ -43,8 +44,8 @@ export const formatDateValue = ( dateValue.month !== null && dateValue.date !== null ? new Date( - Number(dateValue.year), - Number(dateValue.month), + -1, + setMonthPage(`${dateValue.year + 2}-${dateValue.month}`), Number(dateValue.date), timeValue.hour, timeValue.minute,