EPMRPP-110044 || Add props to customize DateRange and DateRangeFormField components (#4769)

Author: siarheirazuvalau

app/src/components/main/dateRange/dateRange.jsx

@@ -37,7 +37,16 @@ export const messages = defineMessages({
   },
 });
 
-export const DateRange = ({ startDate, setStartDate, endDate, setEndDate }) => {
+export const DateRange = ({
+  startDate,
+  setStartDate,
+  endDate,
+  setEndDate,
+  startPopperClassName = '',
+  startCalendarClassName = '',
+  endPopperClassName = '',
+  endCalendarClassName = '',
+}) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -53,6 +62,8 @@ export const DateRange = ({ startDate, setStartDate, endDate, setEndDate }) => {
               endDate={endDate}
               onChange={setStartDate}
               selects={'start'}
+              popperClassName={startPopperClassName}
+              calendarClassName={startCalendarClassName}
             />
           </div>
         </div>
@@ -65,6 +76,8 @@ export const DateRange = ({ startDate, setStartDate, endDate, setEndDate }) => {
               endDate={endDate}
               onChange={setEndDate}
               selects={'end'}
+              popperClassName={endPopperClassName}
+              calendarClassName={endCalendarClassName}
             />
           </div>
         </div>
@@ -78,4 +91,8 @@ DateRange.propTypes = {
   setStartDate: PropTypes.func.isRequired,
   endDate: PropTypes.string.isRequired,
   setEndDate: PropTypes.func.isRequired,
+  startPopperClassName: PropTypes.string,
+  startCalendarClassName: PropTypes.string,
+  endPopperClassName: PropTypes.string,
+  endCalendarClassName: PropTypes.string,
 };

app/src/components/main/dateRange/dateRangeFormField.jsx

@@ -17,7 +17,13 @@
 import PropTypes from 'prop-types';
 import { DateRange } from './dateRange';
 
-export const DateRangeFormField = ({ input }) => {
+export const DateRangeFormField = ({
+  input,
+  startPopperClassName = '',
+  startCalendarClassName = '',
+  endPopperClassName = '',
+  endCalendarClassName = '',
+}) => {
   const { value = {}, onChange } = input;
 
   const startDateChangeHandler = (startDate) => {
@@ -34,6 +40,10 @@ export const DateRangeFormField = ({ input }) => {
       setStartDate={startDateChangeHandler}
       endDate={value?.endDate}
       setEndDate={endDateChangeHandler}
+      startPopperClassName={startPopperClassName}
+      startCalendarClassName={startCalendarClassName}
+      endPopperClassName={endPopperClassName}
+      endCalendarClassName={endCalendarClassName}
     />
   );
 };
@@ -43,4 +53,8 @@ DateRangeFormField.propTypes = {
     value: PropTypes.object,
     onChange: PropTypes.func,
   }).isRequired,
+  startPopperClassName: PropTypes.string,
+  startCalendarClassName: PropTypes.string,
+  endPopperClassName: PropTypes.string,
+  endCalendarClassName: PropTypes.string,
 };