- Add onChooseDate to RangePicker component as #9 states

CHANGELOG.md

@@ -1,5 +1,9 @@
 # 2.0.9
 
+- Add ```onChooseDate``` to RangePicker component as #9 states
+
+# 2.0.9
+
 - Bugfix as #8 states
 
 # 2.0.8

README.md

@@ -99,6 +99,7 @@ import 'react-minimal-datetime-range/lib/react-minimal-datetime-range.min.css';
   // markedDates={[`${todayY}-${todayM}-${todayD - 1}`, `${todayY}-${todayM}-${todayD}`]} // OPTIONAL. ['YYYY-MM-DD']
   showOnlyTime={false} // default is false, only select time
   // duration={2} // day count. default is 0. End date will be automatically added 2 days when the start date is picked.
+  // onChooseDate={res => {}} // on date clicked
   ////////////////////
   // IMPORTANT DESC //
   ////////////////////

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-minimal-datetime-range",
-  "version": "2.0.9",
+  "version": "2.1.0",
   "description": "A react component for date time range picker.",
   "main": "index.js",
   "types": "./lib/index.d.ts",

src/js/component/RangeDate.tsx

@@ -38,6 +38,7 @@ interface IndexProps {
   setCurrentDateObjStart?: (res: object) => void;
   currentDateObjEnd?: IObjectKeysAny;
   setCurrentDateObjEnd?: (res: object) => void;
+  onChooseDate?: (res: object) => void;
 }
 const Index: React.FC<IndexProps> = memo(
   ({
@@ -58,6 +59,7 @@ const Index: React.FC<IndexProps> = memo(
     markedDates = [],
     supportDateRange = [],
     duration = 0,
+    onChooseDate = () => {},
   }) => {
     const markedDatesHash: IObjectKeysBool = useMemo(() => {
       const res: IObjectKeysBool = {};
@@ -299,6 +301,7 @@ const Index: React.FC<IndexProps> = memo(
           minSupportDate={minSupportDate}
           maxSupportDate={maxSupportDate}
           duration={duration}
+          onChooseDate={onChooseDate}
         />
       );
       transitionContainerStyle = {
@@ -494,6 +497,7 @@ interface CalendarBodyProps {
   minSupportDate: string;
   maxSupportDate: string;
   onClick?: (res: string) => void;
+  onChooseDate?: (res: object) => void;
 }
 const CalendarBody: React.FC<CalendarBodyProps> = memo(
   ({
@@ -511,6 +515,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = memo(
     minSupportDate,
     maxSupportDate,
     duration,
+    onChooseDate,
   }) => {
     const content = Object.keys(data).map(key => {
       let colHtml;
@@ -581,6 +586,7 @@ const CalendarBody: React.FC<CalendarBodyProps> = memo(
               isDisabled={isDisabled}
               datePickerItemClass={datePickerItemClass}
               duration={duration}
+              onChooseDate={onChooseDate}
             />
           );
         });
@@ -606,9 +612,22 @@ interface CalendarItemProps {
   isDisabled?: boolean;
   datePickerItemClass?: string;
   duration?: number;
+  onChooseDate?: (res: object) => void;
 }
 const CalendarItem: React.FC<CalendarItemProps> = memo(
-  ({ selected, setSelected, startDatePickedArray, endDatePickedArray, handleChooseStartDate, handleChooseEndDate, item = {}, isDisabled = false, datePickerItemClass = '', duration = 0 }) => {
+  ({
+    selected,
+    setSelected,
+    startDatePickedArray,
+    endDatePickedArray,
+    handleChooseStartDate,
+    handleChooseEndDate,
+    item = {},
+    isDisabled = false,
+    datePickerItemClass = '',
+    duration = 0,
+    onChooseDate,
+  }) => {
     const handleDuration = useCallback(() => {
       const endDateItem = getEndDateItemByDuration(item, duration);
       handleChooseEndDate(endDateItem);
@@ -617,6 +636,7 @@ const CalendarItem: React.FC<CalendarItemProps> = memo(
     }, [item, duration]);
     const handleOnClick = useCallback(() => {
       if (isDisabled) return;
+      onChooseDate && onChooseDate(item);
       if (startDatePickedArray.length) {
         setSelected(true);
         handleChooseEndDate(item);

src/js/component/ReactMinimalRange.tsx

@@ -268,6 +268,7 @@ export interface RangePickerProps {
   onConfirm?: (res: Array<string>) => void;
   onClear?: () => void;
   onClose?: () => void;
+  onChooseDate?: (res: object) => void;
 }
 export const RangePicker: React.FC<RangePickerProps> = memo(
   ({
@@ -285,6 +286,7 @@ export const RangePicker: React.FC<RangePickerProps> = memo(
     supportDateRange = [],
     duration = 0,
     style = {},
+    onChooseDate = () => {},
     onConfirm = () => {},
     onClear = () => {},
     onClose = () => {},
@@ -502,6 +504,7 @@ export const RangePicker: React.FC<RangePickerProps> = memo(
               markedDates={markedDates}
               supportDateRange={supportDateRange}
               duration={duration}
+              onChooseDate={onChooseDate}
             />
           )}
         </div>
@@ -531,6 +534,7 @@ interface RangePickerComponentProps {
   supportDateRange?: Array<string>;
   duration?: number;
   handleOnChangeType: () => void;
+  onChooseDate: (res: object) => void;
   handleOnConfirmClick: () => void;
   handleChooseStartTimeHour: (res: string) => void;
   handleChooseStartTimeMinute: (res: string) => void;
@@ -561,6 +565,7 @@ const RangePickerComponent: React.FC<RangePickerComponentProps> = memo(
     markedDates,
     supportDateRange,
     duration,
+    onChooseDate,
     handleOnChangeType,
     handleOnConfirmClick,
     handleChooseStartTimeHour,
@@ -599,6 +604,7 @@ const RangePickerComponent: React.FC<RangePickerComponentProps> = memo(
             markedDates={markedDates}
             supportDateRange={supportDateRange}
             duration={duration}
+            onChooseDate={onChooseDate}
           />
           <div className="react-minimal-datetime-date-piker__divider" />
           <RangeDate
@@ -619,6 +625,7 @@ const RangePickerComponent: React.FC<RangePickerComponentProps> = memo(
             markedDates={markedDates}
             supportDateRange={supportDateRange}
             duration={duration}
+            onChooseDate={onChooseDate}
           />
           {(showOnlyTime || type === TYPES[1]) && (
             <div className="react-minimal-datetime-range__time-piker">