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,