Skip to content

Commit 40c5fd3

Browse files
flamecommitflamecommit
committed
v2.2.0
1 parent ea6934a commit 40c5fd3

File tree

11 files changed

+75
-41
lines changed

11 files changed

+75
-41
lines changed

‎package/CHANGE.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 2.2.0
2+
3+
- InputUnit에 focus시 datepicker가 자동으로 열리지 않고 Trigger버튼이 추가되었습니다. (이벤트간 충돌 Fix)
4+
- 0~100년 구간의 value가 정상적으로 입력되지 않던 현상을 수정했습니다.
5+
16
## 2.1.0
27

38
- hourStep, minuteStep, secondStep 옵션이 사라지고 timeStep 옵션으로 합쳐집니다.

‎package/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@shinyongjun/react-datepicker",
3-
"version": "2.1.6",
3+
"version": "2.2.0",
44
"main": "./dist/cjs/index.js",
55
"module": "./dist/esm/index.js",
66
"source": "./src/index.tsx",

‎package/src/assets/global.css‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,6 @@
2626
.react-datepicker__input-range-separator {
2727
margin-inline: 4px;
2828
}
29-
.react-datepicker__trigger-button {
30-
position: absolute;
31-
inset: 0;
32-
background-color: transparent;
33-
border: none;
34-
box-shadow: none;
35-
}
3629
.react-datepicker__input-unit {
3730
position: relative;
3831
outline: none;
@@ -61,6 +54,9 @@
6154
background-color: transparent;
6255
font-size: 0;
6356
cursor: pointer;
57+
&:disabled {
58+
cursor: default;
59+
}
6460
}
6561

6662
/* portal */

‎package/src/components/Datepicker.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,8 @@ function Datepicker({
101101
if (!value) return;
102102

103103
const newDate = new Date(
104-
value.getFullYear(),
105-
value.getMonth(),
104+
-1,
105+
setMonthPage(`${value.getFullYear() + 2}-${value.getMonth()}`),
106106
value.getDate(),
107107
timeValue.hour,
108108
timeValue.minute,
@@ -124,8 +124,8 @@ function Datepicker({
124124
}
125125

126126
const newDate = new Date(
127-
Number(dateValue.year),
128-
Number(dateValue.month),
127+
-1,
128+
setMonthPage(`${dateValue.year + 2}-${dateValue.month}`),
129129
Number(dateValue.date),
130130
timeValue.hour,
131131
timeValue.minute,
@@ -141,17 +141,16 @@ function Datepicker({
141141
}, [value]);
142142

143143
// browser에서 focus가 사라졌을 때 picker close
144-
const windowBlurHandler = () => {
145-
setIsVisible(false);
146-
};
147-
148-
useEffect(() => {
149-
window.addEventListener('blur', windowBlurHandler);
150-
// return window.removeEventListener('blur', windowBlurHandler);
151-
return () => {
152-
window.removeEventListener('blur', windowBlurHandler);
153-
};
154-
}, []);
144+
// const windowBlurHandler = () => {
145+
// setIsVisible(false);
146+
// };
147+
148+
// useEffect(() => {
149+
// window.addEventListener('blur', windowBlurHandler);
150+
// return () => {
151+
// window.removeEventListener('blur', windowBlurHandler);
152+
// };
153+
// }, []);
155154

156155
return (
157156
<div className={`${NAME_SPACE}__wrapper ${className}`}>

‎package/src/components/Rangepicker.tsx‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,8 @@ export default function Rangepicker({
140140
if (!startValue) return;
141141

142142
const newDate = new Date(
143-
startValue.getFullYear(),
144-
startValue.getMonth(),
143+
-1,
144+
setMonthPage(`${startValue.getFullYear() + 2}-${startValue.getMonth()}`),
145145
startValue.getDate(),
146146
timeStartValue.hour,
147147
timeStartValue.minute,
@@ -164,8 +164,8 @@ export default function Rangepicker({
164164
}
165165

166166
const newDate = new Date(
167-
Number(dateStartValue.year),
168-
Number(dateStartValue.month),
167+
-1,
168+
setMonthPage(`${dateStartValue.year + 2}-${dateStartValue.month}`),
169169
Number(dateStartValue.date),
170170
timeStartValue.hour,
171171
timeStartValue.minute,
@@ -181,8 +181,8 @@ export default function Rangepicker({
181181
if (!endValue) return;
182182

183183
const newDate = new Date(
184-
endValue.getFullYear(),
185-
endValue.getMonth(),
184+
-1,
185+
setMonthPage(`${endValue.getFullYear() + 2}-${endValue.getMonth()}`),
186186
endValue.getDate(),
187187
timeEndValue.hour,
188188
timeEndValue.minute,
@@ -205,8 +205,8 @@ export default function Rangepicker({
205205
}
206206

207207
const newDate = new Date(
208-
Number(dateEndValue.year),
209-
Number(dateEndValue.month),
208+
-1,
209+
setMonthPage(`${dateEndValue.year + 2}-${dateEndValue.month}`),
210210
Number(dateEndValue.date),
211211
timeEndValue.hour,
212212
timeEndValue.minute,
@@ -237,6 +237,18 @@ export default function Rangepicker({
237237
// eslint-disable-next-line react-hooks/exhaustive-deps
238238
}, [startValue, endValue]);
239239

240+
// browser에서 focus가 사라졌을 때 picker close
241+
// const windowBlurHandler = () => {
242+
// setIsVisible(false);
243+
// };
244+
245+
// useEffect(() => {
246+
// window.addEventListener('blur', windowBlurHandler);
247+
// return () => {
248+
// window.removeEventListener('blur', windowBlurHandler);
249+
// };
250+
// }, []);
251+
240252
return (
241253
<div className={`${NAME_SPACE}__wrapper ${className}`}>
242254
<RangepickerInput

‎package/src/components/datepicker/Month.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface Iprops {
1616
setIsVisible: (value: boolean) => void;
1717
}
1818

19-
function DatepicerMonth({
19+
export default function DatepickerMonth({
2020
dateValue,
2121
setDateValue,
2222
valueFormat,
@@ -111,5 +111,3 @@ function DatepicerMonth({
111111
</div>
112112
);
113113
}
114-
115-
export default DatepicerMonth;

‎package/src/components/input/DatepickerInput.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export default function DatepickerInput({
6565
type="button"
6666
className={`${NAME_SPACE}__trigger`}
6767
onClick={triggerHandler}
68+
disabled={disabled}
6869
>
6970
Trigger
7071
</button>

‎package/src/components/input/InputUnit.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ function InputUnit({
126126
}
127127

128128
const conditions = {
129-
YYYY: Number(value) > 9999 ? '9999' : addLeadingZero(value),
129+
YYYY: Number(value) > 9999 ? '9999' : value,
130130
MM: Number(value) > 12 ? '12' : addLeadingZero(value),
131131
DD: Number(value) > 31 ? '31' : addLeadingZero(value),
132132
hh: Number(value) > 23 ? '23' : addLeadingZero(value),

‎package/src/components/input/RangepickerInput.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export default function RangepickerInput({
8484
type="button"
8585
className={`${NAME_SPACE}__trigger`}
8686
onClick={() => triggerHandler('start')}
87+
disabled={disabled}
8788
>
8889
Trigger
8990
</button>
@@ -112,6 +113,7 @@ export default function RangepickerInput({
112113
type="button"
113114
className={`${NAME_SPACE}__trigger`}
114115
onClick={() => triggerHandler('end')}
116+
disabled={disabled}
115117
>
116118
Trigger
117119
</button>

‎package/src/components/rangepicker/Month.tsx‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useMemo } from 'react';
44
import { NAME_SPACE } from '../../constants/core';
55
import { IDateValue, ITimeValue, TIsVisible } from '../../types/props';
66
import { formatDate, formatDateValue } from '../../utils/datetime';
7+
import { setMonthPage } from '../../utils/page';
78

89
interface Iprops {
910
type: TIsVisible;
@@ -33,6 +34,14 @@ export default function RangepickerMonth({
3334
const lastDate = lastDateValue.getDate(); // 이달 말 일
3435
const lastDay = lastDateValue.getDay(); // 이달 말 일의 요일
3536
const prevLastDate = new Date(year, month - 1, 0).getDate(); // 이전달의 말 일
37+
const startValue = useMemo(
38+
() => (type === 'start' ? dateValue : pairValue),
39+
[dateValue, pairValue, type]
40+
);
41+
const endValue = useMemo(
42+
() => (type === 'end' ? dateValue : pairValue),
43+
[dateValue, pairValue, type]
44+
);
3645
const formatedDateValue = useMemo(
3746
() => formatDateValue(dateValue, timeValue, valueFormat),
3847
[dateValue, timeValue, valueFormat]
@@ -48,6 +57,17 @@ export default function RangepickerMonth({
4857
return type === 'end' ? formatedDateValue : formatedPairValue;
4958
}, [formatedDateValue, formatedPairValue, type]);
5059

60+
const parsedValueToDate = (value: IDateValue) => {
61+
return new Date(
62+
-1,
63+
setMonthPage(`${value.year! + 2}-${value.month!}`),
64+
value.date!,
65+
timeValue.hour,
66+
timeValue.minute,
67+
timeValue.second
68+
);
69+
};
70+
5171
const renderDateButton = (
5272
month: number,
5373
date: number,
@@ -93,10 +113,10 @@ export default function RangepickerMonth({
93113
data-start-active={formatedStartValue === formatedThisValue}
94114
data-end-active={formatedEndValue === formatedThisValue}
95115
data-range-active={
96-
formatedStartValue &&
97-
formatedEndValue &&
98-
buttonDate > new Date(formatedStartValue) &&
99-
buttonDate < new Date(formatedEndValue)
116+
startValue &&
117+
endValue &&
118+
buttonDate > parsedValueToDate(startValue) &&
119+
buttonDate < parsedValueToDate(endValue)
100120
}
101121
onClick={handleClick}
102122
>

0 commit comments

Comments
 (0)