v2.2.0

Author: flamecommit

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 옵션으로 합쳐집니다.

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",

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 */

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 (
     <div className={`${NAME_SPACE}__wrapper ${className}`}>

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 (
     <div className={`${NAME_SPACE}__wrapper ${className}`}>
       <RangepickerInput

package/src/components/datepicker/Month.tsx

@@ -16,7 +16,7 @@ interface Iprops {
   setIsVisible: (value: boolean) => void;
 }
 
-function DatepicerMonth({
+export default function DatepickerMonth({
   dateValue,
   setDateValue,
   valueFormat,
@@ -111,5 +111,3 @@ function DatepicerMonth({
     </div>
   );
 }
-
-export default DatepicerMonth;

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
       </button>

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),

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
       </button>
@@ -112,6 +113,7 @@ export default function RangepickerInput({
         type="button"
         className={`${NAME_SPACE}__trigger`}
         onClick={() => triggerHandler('end')}
+        disabled={disabled}
       >
         Trigger
       </button>

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}
       >

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,