diff --git a/web/src/components/MyEMS/Meter/MeterCost.js b/web/src/components/MyEMS/Meter/MeterCost.js
index d34070d3..bb6c991d 100644
--- a/web/src/components/MyEMS/Meter/MeterCost.js
+++ b/web/src/components/MyEMS/Meter/MeterCost.js
@@ -30,6 +30,7 @@ import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { periodTypeOptions } from '../common/PeriodTypeOptions';
 import { comparisonTypeOptions } from '../common/ComparisonTypeOptions';
+import { DateRangePicker } from 'rsuite';
 
 
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@@ -93,6 +94,27 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
   const [detailedDataTableColumns, setDetailedDataTableColumns] = useState([{dataField: 'startdatetime', text: t('Datetime'), sort: true}]);
   const [detailedDataTableData, setDetailedDataTableData] = useState([]);
   const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
+  const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
+  const [baseValues, setBaseValues] = useState([current_moment.clone().subtract(1, 'months').startOf('month').toDate(),
+    current_moment.clone().subtract(1, 'months').toDate()]);
+  const [basePeriodDatetimeDisabled, setBasePeriodDatetimeDisabled] = useState(true);
+  const local = {
+    sunday: t('sunday'),
+    monday: t('monday'),
+    tuesday: t('tuesday'),
+    wednesday: t('wednesday'),
+    thursday: t('thursday'),
+    friday: t('friday'),
+    saturday: t('saturday'),
+    ok: t('ok'),
+    today: t('today'),
+    yesterday: t('yesterday'),
+    hours: t('hours'),
+    minutes: t('minutes'),
+    seconds: t('seconds'),
+    last7Days: t('last7Days')
+  };
+  const styles = { display: 'block', zIndex: 10};
 
   useEffect(() => {
     let isResponseOK = false;
@@ -231,66 +253,66 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
     console.log(target.value);
     setComparisonType(target.value);
     if (target.value === 'year-over-year') {
-      setBasePeriodBeginsDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
       setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years'));
       setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
+      setBaseValues([moment(reportingPeriodBeginsDatetime).subtract(1, 'years').toDate(),
+        moment(reportingPeriodEndsDatetime).subtract(1, 'years').toDate()]);
     } else if (target.value === 'month-on-month') {
-      setBasePeriodBeginsDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
       setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months'));
       setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
+      setBaseValues([moment(reportingPeriodBeginsDatetime).subtract(1, 'months').toDate(),
+        moment(reportingPeriodEndsDatetime).subtract(1, 'months').toDate()]);
     } else if (target.value === 'free-comparison') {
-      setBasePeriodBeginsDatetimeDisabled(false);
-      setBasePeriodEndsDatetimeDisabled(false);
+      setBasePeriodDatetimeDisabled(false);
     } else if (target.value === 'none-comparison') {
+      setBaseValues([]);
       setBasePeriodBeginsDatetime(undefined);
       setBasePeriodEndsDatetime(undefined);
-      setBasePeriodBeginsDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
     }
   };
 
-  let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
-    setBasePeriodBeginsDatetime(newDateTime);
+  let onBasePeriodChange = (DateRange) => {
+    if(DateRange == null){
+      setBaseValues([]);
+    }
+    let startDate = moment(DateRange[0]);
+    let endDate = moment(DateRange[1]);
+    setBaseValues([DateRange[0], DateRange[1]]);
+    setBasePeriodBeginsDatetime(startDate);
+    setBasePeriodEndsDatetime(endDate);
   };
 
-  let onBasePeriodEndsDatetimeChange = (newDateTime) => {
-    setBasePeriodEndsDatetime(newDateTime);
-  };
-
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
+  let onChange = (DateRange) => {
+    if(DateRange == null){
+      setValues([]);
+    }
+    let startDate = moment(DateRange[0]);
+    let endDate = moment(DateRange[1]);
+    setValues([DateRange[0], DateRange[1]]);
+    setReportingPeriodBeginsDatetime(startDate);
+    setReportingPeriodEndsDatetime(endDate);
     if (comparisonType === 'year-over-year') {
-      setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'years'));
+      setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years'));
+      setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'years'));
+      setBaseValues([startDate.clone().subtract(1, 'years').toDate(),
+        endDate.clone().subtract(1, 'years').toDate()]);
     } else if (comparisonType === 'month-on-month') {
-      setBasePeriodBeginsDatetime(newDateTime.clone().subtract(1, 'months'));
+      setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'months'));
+      setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months'));
+      setBaseValues([startDate.clone().subtract(1, 'months').toDate(),
+        endDate.clone().subtract(1, 'months').toDate()]);
     }
   };
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
-    setReportingPeriodEndsDatetime(newDateTime);
-    if (comparisonType === 'year-over-year') {
-      setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'years'));
-    } else if (comparisonType === 'month-on-month') {
-      setBasePeriodEndsDatetime(newDateTime.clone().subtract(1, 'months'));
-    }
+  let onClean = event => {
+    setValues([]);
   };
 
-  var getValidBasePeriodBeginsDatetimes = function (currentDate) {
-    return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  };
-
-  var getValidBasePeriodEndsDatetimes = function (currentDate) {
-    return currentDate.isAfter(moment(basePeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  };
-
-  var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
-    return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  };
-
-  var getValidReportingPeriodEndsDatetimes = function (currentDate) {
-    return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
+  let onBaseClean = event => {
+    setValues([]);
   };
 
   // Handler
@@ -530,51 +552,37 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
                   <Label className={labelClasses} for="basePeriodBeginsDatetime">
-                    {t('Base Period Begins')}{t('(Optional)')}
+                    {t('Base Period')}{t('(Optional)')}
                   </Label>
-                  <Datetime id='basePeriodBeginsDatetime'
-                    value={basePeriodBeginsDatetime}
-                    inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }}
-                    onChange={onBasePeriodBeginsDatetimeChange}
-                    isValidDate={getValidBasePeriodBeginsDatetimes}
-                    closeOnSelect={true} />
+                  <DateRangePicker
+                    readOnly={basePeriodDatetimeDisabled}
+                    format="MM/dd/yyyy hh:mm aa"
+                    value={baseValues}
+                    onChange={onBasePeriodChange}
+                    size="md"
+                    style={styles}
+                    onClean={onBaseClean}
+                    locale={local}
+                    showMeridian
+                    placeholder={"~"}
+                   />
                 </FormGroup>
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="basePeriodEndsDatetime">
-                    {t('Base Period Ends')}{t('(Optional)')}
-                  </Label>
-                  <Datetime id='basePeriodEndsDatetime'
-                    value={basePeriodEndsDatetime}
-                    inputProps={{ disabled: basePeriodEndsDatetimeDisabled }}
-                    onChange={onBasePeriodEndsDatetimeChange}
-                    isValidDate={getValidBasePeriodEndsDatetimes}
-                    closeOnSelect={true} />
-                </FormGroup>
-              </Col>
-              <Col xs={6} sm={3}>
-                <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
-                    {t('Reporting Period Begins')}
-                  </Label>
-                  <Datetime id='reportingPeriodBeginsDatetime'
-                    value={reportingPeriodBeginsDatetime}
-                    onChange={onReportingPeriodBeginsDatetimeChange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
-                    closeOnSelect={true} />
-                </FormGroup>
-              </Col>
-              <Col xs={6} sm={3}>
-                <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
-                    {t('Reporting Period Ends')}
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
+                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
+                  <br/>
+                  <DateRangePicker
+                    format="MM/dd/yyyy hh:mm aa"
+                    value={values}
+                    size="md"
+                    style={styles}
+                    onChange={onChange}
+                    showMeridian
+                    placeholder="Select Date Range"
+                    onClean={onClean}
+                    locale={local}
+                  />
                 </FormGroup>
               </Col>
               <Col xs="auto">
diff --git a/web/src/components/MyEMS/Meter/MeterEnergy.js b/web/src/components/MyEMS/Meter/MeterEnergy.js
index d90f636b..d417388c 100644
--- a/web/src/components/MyEMS/Meter/MeterEnergy.js
+++ b/web/src/components/MyEMS/Meter/MeterEnergy.js
@@ -104,7 +104,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     wednesday: t('wednesday'),
     thursday: t('thursday'),
     friday: t('friday'),
-    saturday: t('friday'),
+    saturday: t('saturday'),
     ok: t('ok'),
     today: t('today'),
     yesterday: t('yesterday'),
@@ -297,11 +297,13 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     if (comparisonType === 'year-over-year') {
       setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'years'));
       setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'years'));
-      setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]);
+      setBaseValues([startDate.clone().subtract(1, 'years').toDate(),
+        endDate.clone().subtract(1, 'years').toDate()]);
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodBeginsDatetime(startDate.clone().subtract(1, 'months'));
       setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months'));
-      setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]);
+      setBaseValues([startDate.clone().subtract(1, 'months').toDate(),
+        endDate.clone().subtract(1, 'months').toDate()]);
     }
   };