it works

packages/app/src/components/Admin/AuditLog/DateRangePicker.tsx

@@ -1,20 +1,47 @@
-import React, { FC } from 'react';
+import React, { FC, useRef, forwardRef } from 'react';
 
 import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
 
+type CustomInputProps = {
+  buttonRef: React.Ref<HTMLButtonElement>
+  onClick?: () => void;
+}
+
+const CustomInput = forwardRef<HTMLButtonElement, CustomInputProps>((props: CustomInputProps) => {
+  return (
+    <button
+      type="button"
+      className="btn btn-outline-secondary dropdown-toggle"
+      ref={props.buttonRef}
+      onClick={props.onClick}
+    >
+      <i className="fa fa-fw fa-calendar" /> Date
+    </button>
+  );
+});
+
+
 type DateRangePickerProps = {
-  startDate: Date
-  setStartDate: (date: Date) => void
+  startDate: Date | null
+  endDate: Date | null
+  onChangeDate: (dateList: Date[] | null[]) => void
 }
 
 export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePickerProps) => {
+  const { startDate, endDate } = props;
+  const buttonRef = useRef(null);
 
   return (
-    <DatePicker
-      selected={props.startDate}
-      onChange={(date: Date) => props.setStartDate(date)}
-    />
+    <div className="btn-group mr-2 mb-3">
+      <DatePicker
+        selectsRange
+        startDate={startDate}
+        endDate={endDate}
+        onChange={props.onChangeDate}
+        customInput={<CustomInput buttonRef={buttonRef} />}
+      />
+    </div>
   );
 };

packages/app/src/components/Admin/AuditLogManagement.tsx

@@ -23,7 +23,8 @@ export const AuditLogManagement: FC = () => {
    */
   const [activePage, setActivePage] = useState<number>(1);
   const offset = (activePage - 1) * PAGING_LIMIT;
-  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [startDate, setStartDate] = useState<Date | null>(new Date());
+  const [endDate, setEndDate] = useState<Date | null>(null);
   const [actionMap, setActionMap] = useState(
     new Map<SupportedActionType, boolean>(AllSupportedActionType.map(action => [action, true])),
   );
@@ -46,6 +47,12 @@ export const AuditLogManagement: FC = () => {
     setActivePage(selectedPageNum);
   }, []);
 
+  const selectDateChangeHandler = useCallback((dateList: Date[] | null[]) => {
+    const [start, end] = dateList;
+    setStartDate(start);
+    setEndDate(end);
+  }, []);
+
   const selectActionCheckboxChangedHandler = useCallback((action: SupportedActionType) => {
     setActivePage(1);
     actionMap.set(action, !actionMap.get(action));
@@ -67,7 +74,8 @@ export const AuditLogManagement: FC = () => {
 
       <DateRangePicker
         startDate={startDate}
-        setStartDate={setStartDate}
+        endDate={endDate}
+        onChangeDate={selectDateChangeHandler}
       />
 
       <SelectActionDropdown