Merge branch 'main' of https://github.com/shinyj1991/react-datepicker

Author: 신용준

package/CHANGE.md

@@ -1,3 +1,17 @@
+## 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?
+
+- add props weekdayLabels - An option that allows you to label the day of the week in any format that you want.
+
 ## 1.6.0
 
 ### What's New?

package/README.md

@@ -1,6 +1,6 @@
 # React Datepicker
 
-![Datepicker](https://github.com/shinyj1991/react-datepicker/raw/main/package/public/readme-1.png)
+![Datepicker](https://github.com/shinyj1991/react-datepicker/raw/main/package/public/readme-2.jpg)
 
 Example - [Link](https://shinyongjun.com/react-datepicker/example)
 

package/package.json

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

package/public/readme-2.jpg

@@ -100,7 +100,19 @@
   grid-template-columns: repeat(7, 1fr);
   width: 252px;
 }
+.react-datepicker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-basis: 100%;
+  height: 36px;
+  color: #000;
+}
 .react-datepicker__datepicker-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background-color: transparent;
   flex-basis: 100%;

package/src/assets/ReactDatepicker.css

@@ -20,6 +20,7 @@ interface IProps {
   valueFormat?: string;
   labelFormat?: string;
   closesAfterChange?: boolean;
+  weekdayLabels?: string[];
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -30,6 +31,7 @@ function Datepicker({
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
+  weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -87,13 +89,15 @@ function Datepicker({
                   value={value}
                   valueFormat={valueFormat}
                   monthPage={monthPage}
+                  weekdayLabels={weekdayLabels}
                   setValue={setValue}
                 />
                 {showsMultipleCalendar && (
                   <DatepickerMonth
                     value={value}
                     valueFormat={valueFormat}
                     monthPage={monthPage + 1}
+                    weekdayLabels={weekdayLabels}
                     setValue={setValue}
                   />
                 )}

package/src/components/Datepicker.tsx

@@ -15,27 +15,32 @@ 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;
-  onChange?: (activeDate: Date | null) => void;
+  weekdayLabels?: string[];
+  onChange?: (startDate: Date | null, endDate: Date | null) => void;
 }
 
 function Rangepicker({
-  // initValue = null,
+  initStartValue = null,
+  initEndValue = null,
   useClearButton = false,
   showsMultipleCalendar = false,
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
   closesAfterChange = true,
+  weekdayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
   onChange,
 }: 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')
@@ -61,6 +66,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
@@ -91,6 +102,7 @@ function Rangepicker({
                   hoverValue={hoverValue}
                   valueFormat={valueFormat}
                   monthPage={monthPage}
+                  weekdayLabels={weekdayLabels}
                   setStartValue={setStartValue}
                   setEndValue={setEndValue}
                   setHoverValue={setHoverValue}
@@ -102,6 +114,7 @@ function Rangepicker({
                     hoverValue={hoverValue}
                     valueFormat={valueFormat}
                     monthPage={monthPage + 1}
+                    weekdayLabels={weekdayLabels}
                     setStartValue={setStartValue}
                     setEndValue={setEndValue}
                     setHoverValue={setHoverValue}

package/src/components/Rangepicker.tsx

@@ -8,10 +8,17 @@ interface Iprops {
   value: Date | null;
   valueFormat: string;
   monthPage: number;
+  weekdayLabels: string[];
   setValue: (value: Date) => void;
 }
 
-function DatepicerMonth({ value, valueFormat, monthPage, setValue }: Iprops) {
+function DatepicerMonth({
+  value,
+  valueFormat,
+  monthPage,
+  weekdayLabels,
+  setValue,
+}: Iprops) {
   const year = Math.ceil(monthPage / 12);
   const month = monthPage % 12 || 12;
   const firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
@@ -46,6 +53,11 @@ function DatepicerMonth({ value, valueFormat, monthPage, setValue }: Iprops) {
 
   return (
     <div className={`${NAME_SPACE}__month-view`}>
+      {weekdayLabels.map((day, index) => (
+        <div className={`${NAME_SPACE}__weekday`} data-day={index} key={day}>
+          {day}
+        </div>
+      ))}
       {Array.apply(0, Array(firstDay)).map((x, i) => {
         const date = prevLastDate - (firstDay - i - 1);
         const thisValue = new Date(-1, monthPage + 22, date);

package/src/components/datepicker/Month.tsx

@@ -10,6 +10,7 @@ interface Iprops {
   hoverValue: Date | null;
   valueFormat: string;
   monthPage: number;
+  weekdayLabels: string[];
   setStartValue: (value: Date | null) => void;
   setEndValue: (value: Date | null) => void;
   setHoverValue: (value: Date | null) => void;
@@ -21,6 +22,7 @@ function RangepicerMonth({
   hoverValue,
   valueFormat,
   monthPage,
+  weekdayLabels,
   setStartValue,
   setEndValue,
   setHoverValue,
@@ -94,6 +96,11 @@ function RangepicerMonth({
 
   return (
     <div className={`${NAME_SPACE}__month-view`}>
+      {weekdayLabels.map((day, index) => (
+        <div className={`${NAME_SPACE}__weekday`} data-day={index} key={day}>
+          {day}
+        </div>
+      ))}
       {Array.apply(0, Array(firstDay)).map((x, i) => {
         const date = prevLastDate - (firstDay - i - 1);
         const thisValue = new Date(-1, monthPage + 22, date);

package/src/components/rangepicker/Month.tsx

@@ -22,6 +22,23 @@ function App() {
       <Rangepicker />
       <Rangepicker showsMultipleCalendar />
       <Rangepicker closesAfterChange={false} />
+      <Rangepicker
+        weekdayLabels={['일', '월', '화', '수', '목', '금', '토']}
+        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>
   );
 }