- Add supportDateRange to Calendar component

edwardfxiao · Feb 18, 2022 · b079050 · b079050
1 parent 6b9541a
commit b079050
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 2.0.3
+
+- Add ```supportDateRange``` to Calendar component
+
 # 2.0.2
 
 - Support Korean

diff --git a/README.md b/README.md
@@ -48,14 +48,15 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   show={showCalendarPicker} //default is false
   allowPageClickToClose={true} // default is true
   onClose={() => setShowCalendarPicker(false)}
-  defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "MM/DD/YYYY"
+  defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "YYYY-MM-DD"
   onYearPicked={res => console.log(res)}
   onMonthPicked={res => console.log(res)}
   onDatePicked={res => console.log(res)}
   onResetDate={res => console.log(res)}
   onResetDefaultDate={res => console.log(res)}
   style={{ width: '300px', margin: '10px auto 0' }}
   // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`]} // OPTIONAL. ['YYYY-MM-DD']
+  // supportDateRange={[`2022-02-16`, `2022-12-10`]} // "YYYY-MM-DD"
   // defaultTimes={['10:12']} // OPTIONAL
   // enableTimeSelection={true} // OPTIONAL
   // handleChooseHourPick={res => console.log(res)} // OPTIONAL

diff --git a/example/index.js b/example/index.js
@@ -56,14 +56,15 @@ const Component = () => {
               show={showCalendarPicker} //default is false
               onClose={() => setShowCalendarPicker(false)}
               allowPageClickToClose={true} // default is true
-              defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "MM/DD/YYYY"
+              defaultDate={year + '-' + month + '-' + date} // OPTIONAL. format: "YYYY-MM-DD"
               onYearPicked={res => console.log(res)}
               onMonthPicked={res => console.log(res)}
               onDatePicked={res => console.log(res)}
               onResetDate={res => console.log(res)}
               onResetDefaultDate={res => console.log(res)}
               style={{ width: '300px', margin: '10px auto 0' }}
               markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`]} // OPTIONAL. ['YYYY-MM-DD']
+              // supportDateRange={[`2022-02-16`, `2022-12-10`]} // "YYYY-MM-DD"
               // defaultTimes={['10:12']} // OPTIONAL
               // enableTimeSelection={true} // OPTIONAL
               // handleChooseHourPick={res => console.log(res)} // OPTIONAL

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-minimal-datetime-range",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A react component for date time range picker.",
   "main": "index.js",
   "types": "./lib/index.d.ts",

diff --git a/src/js/component/Calendar.tsx b/src/js/component/Calendar.tsx
@@ -6,9 +6,6 @@ import { cx, isValidDate, isValidDates } from './utils';
 interface IObjectKeysAny {
   [key: string]: any;
 }
-interface IObjectKeysObject {
-  [key: string]: object;
-}
 interface IObjectKeysBool {
   [key: string]: boolean;
 }
@@ -26,14 +23,25 @@ interface IndexProps {
   locale?: string;
   defaultDate?: string;
   markedDates?: Array<string>;
+  supportDateRange?: Array<string>;
   onYearPicked?: (res: object) => void;
   onMonthPicked?: (res: object) => void;
   onDatePicked?: (res: object) => void;
   onResetDate?: (res: object) => void;
   onResetDefaultDate?: (res: object) => void;
 }
 const Index: React.FC<IndexProps> = memo(
-  ({ locale = 'en-us', defaultDate = '', markedDates = [], onYearPicked = () => {}, onMonthPicked = () => {}, onDatePicked = () => {}, onResetDate = () => {}, onResetDefaultDate = () => {} }) => {
+  ({
+    locale = 'en-us',
+    defaultDate = '',
+    markedDates = [],
+    supportDateRange = [],
+    onYearPicked = () => {},
+    onMonthPicked = () => {},
+    onDatePicked = () => {},
+    onResetDate = () => {},
+    onResetDefaultDate = () => {},
+  }) => {
     const markedDatesHash: IObjectKeysBool = useMemo(() => {
       const res: IObjectKeysBool = {};
       if (markedDates && markedDates.length) {
@@ -95,6 +103,8 @@ const Index: React.FC<IndexProps> = memo(
     useEffect(() => {
       setDates(getDaysArray(Number(pickedYearMonth.year), Number(pickedYearMonth.month)));
     }, [pickedYearMonth]);
+    const minSupportDate = supportDateRange.length > 0 && isValidDate(supportDateRange[0]) ? supportDateRange[0] : '';
+    const maxSupportDate = supportDateRange.length > 1 && isValidDate(supportDateRange[1]) ? supportDateRange[1] : '';
     const pickYear = useCallback(
       (year, direction) => {
         year = Number(year);
@@ -221,7 +231,18 @@ const Index: React.FC<IndexProps> = memo(
           rowObj[rowIndex].push(item);
         }
       });
-      content = <CalendarBody data={rowObj} pickedYearMonth={pickedYearMonth} pickedDateInfo={pickedDateInfo} onClick={pickDate} key={pickedYearMonth.string} markedDatesHash={markedDatesHash} />;
+      content = (
+        <CalendarBody
+          data={rowObj}
+          pickedYearMonth={pickedYearMonth}
+          pickedDateInfo={pickedDateInfo}
+          onClick={pickDate}
+          key={pickedYearMonth.string}
+          markedDatesHash={markedDatesHash}
+          minSupportDate={minSupportDate}
+          maxSupportDate={maxSupportDate}
+        />
+      );
       transitionContainerStyle = {
         height: `${row * ITEM_HEIGHT}px`,
       };
@@ -408,15 +429,28 @@ interface CalendarBodyProps {
   pickedYearMonth?: pickedYearMonth;
   markedDates?: Array<string>;
   markedDatesHash: IObjectKeysBool;
+  minSupportDate: string;
+  maxSupportDate: string;
   onClick?: (res: string) => void;
 }
-const CalendarBody: React.FC<CalendarBodyProps> = memo(({ data = {}, pickedDateInfo = {}, pickedYearMonth = {}, onClick = () => {}, markedDatesHash }) => {
+const CalendarBody: React.FC<CalendarBodyProps> = memo(({ data = {}, pickedDateInfo = {}, pickedYearMonth = {}, onClick = () => {}, markedDatesHash, minSupportDate, maxSupportDate }) => {
   const content = Object.keys(data).map(key => {
     let colHtml;
     if (data[key].length) {
       colHtml = data[key].map((item: { [k: string]: any }, key: any) => {
+        const itemDate = `${item.year}-${Number(item.month)}-${Number(item.name)}`;
         const isPicked = pickedDateInfo.date === item.name && pickedDateInfo.month === item.month && pickedDateInfo.year === item.year;
         let isDisabled = pickedYearMonth.month !== item.month;
+        if (minSupportDate) {
+          if (new Date(itemDate) < new Date(minSupportDate)) {
+            isDisabled = true;
+          }
+        }
+        if (maxSupportDate) {
+          if (new Date(itemDate) > new Date(maxSupportDate)) {
+            isDisabled = true;
+          }
+        }
         const datePickerItemClass = cx(
           'react-minimal-datetime-range-calendar__table-cel',
           'react-minimal-datetime-range-calendar__date-item',

diff --git a/src/js/component/ReactMinimalRange.tsx b/src/js/component/ReactMinimalRange.tsx
@@ -18,6 +18,7 @@ interface CalendarPickerProps {
   defaultTimes?: Array<string>;
   enableTimeSelection?: boolean;
   markedDates?: Array<string>;
+  supportDateRange?: Array<string>;
   onClose?: () => void;
   onYearPicked?: (res: object) => void;
   onMonthPicked?: (res: object) => void;
@@ -37,6 +38,7 @@ export const CalendarPicker: React.FC<CalendarPickerProps> = memo(
     defaultTimes = ['', ''],
     enableTimeSelection = false,
     markedDates = [],
+    supportDateRange = [],
     onClose = () => {},
     onYearPicked = () => {},
     onMonthPicked = () => {},
@@ -110,6 +112,7 @@ export const CalendarPicker: React.FC<CalendarPickerProps> = memo(
             handleChooseHourPick={handleChooseHourPick}
             handleChooseMinutePick={handleChooseMinutePick}
             markedDates={markedDates}
+            supportDateRange={supportDateRange}
           />
         )}
       </div>
@@ -124,6 +127,7 @@ interface CalendarPickerComponentProps {
   defaultTimes?: Array<string>;
   enableTimeSelection?: boolean;
   markedDates?: Array<string>;
+  supportDateRange?: Array<string>;
   onClose?: () => void;
   handleOnYearPicked?: (res: object) => void;
   handleOnMonthPicked?: (res: object) => void;
@@ -140,6 +144,7 @@ const CalendarPickerComponent: React.FC<CalendarPickerComponentProps> = memo(
     locale,
     defaultTimes,
     markedDates,
+    supportDateRange,
     enableTimeSelection,
     onClose,
     handleOnYearPicked,
@@ -206,6 +211,7 @@ const CalendarPickerComponent: React.FC<CalendarPickerComponentProps> = memo(
               onResetDate={handleOnResetDate}
               onResetDefaultDate={handleOnResetDefaultDate}
               markedDates={markedDates}
+              supportDateRange={supportDateRange}
             />
           </div>
           {type === TYPES[1] && (