feat : Add Props

Author: flamecommit

package/CHANGE.md

@@ -1,3 +1,11 @@
+## 1.8.0
+
+### What's New?
+
+- add props `initStartValue` of `Rangepicker`
+- add props `initEndValue` of `Rangepicker`
+- add props `onChange` of `Rangepicker`
+
 ## 1.7.0
 
 ### What's New?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/components/Rangepicker.tsx

@@ -16,17 +16,20 @@ import InputRange from './input/Range';
 
 interface IProps {
   // initValue?: Date | null;
+  initStartValue?: Date | null;
+  initEndValue?: Date | null;
   useClearButton?: boolean;
   showsMultipleCalendar?: boolean;
   valueFormat?: string;
   labelFormat?: string;
   closesAfterChange?: boolean;
   weekdayLabels?: string[];
-  onChange?: (activeDate: Date | null) => void;
+  onChange?: (startDate: Date | null, endDate: Date | null) => void;
 }
 
 function Rangepicker({
-  // initValue = null,
+  initStartValue = null,
+  initEndValue = null,
   useClearButton = false,
   showsMultipleCalendar = false,
   valueFormat = 'YYYY-MM-DD',
@@ -37,8 +40,8 @@ function Rangepicker({
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
   const NEW_DATE = new Date();
-  const [startValue, setStartValue] = useState<Date | null>(null);
-  const [endValue, setEndValue] = useState<Date | null>(null);
+  const [startValue, setStartValue] = useState<Date | null>(initStartValue);
+  const [endValue, setEndValue] = useState<Date | null>(initEndValue);
   const [hoverValue, setHoverValue] = useState<Date | null>(null);
   const [viewDate, setViewDate] = useState<string>(
     formatDate(startValue || NEW_DATE, 'YYYY-MM-DD')
@@ -64,6 +67,12 @@ function Rangepicker({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [endValue, onChange, setViewDate]);
 
+  useEffect(() => {
+    if (onChange) {
+      onChange(startValue, endValue);
+    }
+  }, [startValue, endValue, onChange]);
+
   return (
     <div className={`${NAME_SPACE}__wrapper`}>
       <InputRange

test/src/App.tsx

@@ -26,6 +26,18 @@ function App() {
         showsMultipleCalendar
         closesAfterChange={false}
       />
+      <Rangepicker
+        weekdayLabels={['일', '월', '화', '수', '목', '금', '토']}
+        showsMultipleCalendar
+        closesAfterChange={false}
+        onChange={(startDate, endDate) => {
+          console.log(startDate, endDate);
+        }}
+      />
+      <Rangepicker
+        initStartValue={new Date(2023, 7, 1)}
+        initEndValue={new Date(2023, 8, 7)}
+      />
     </div>
   );
 }