Merge branch 'develop'

web/src/components/MyEMS/Meter/MeterBatch.js

@@ -14,21 +14,19 @@ import {
   Label,
   Spinner,
 } from 'reactstrap';
-import Datetime from 'react-datetime';
+import Cascader from 'rc-cascader';
 import moment from 'moment';
 import loadable from '@loadable/component';
-import Cascader from 'rc-cascader';
 import { getCookieValue, createCookie } from '../../../helpers/utils';
 import withRedirect from '../../../hoc/withRedirect';
 import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
-
+import { DateRangePicker } from 'rsuite';
 
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
-
 const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
   let current_moment = moment();
   useEffect(() => {
@@ -50,13 +48,29 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
     }
   });
   // State
-  // Query Parameters
+  //Query From
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
   const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
+  const dateRangePickerLocale = {
+    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 dateRangePickerStyle = { display: 'block', zIndex: 10};
 
   // buttons
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);
@@ -114,30 +128,27 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
     setMeterList([]);
     setExportButtonHidden(true);
     setSubmitButtonDisabled(false);
-  }
+  };
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
-  }
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodChange = (DateRange) => {
-    setReportingPeriodEndsDatetime(newDateTime);
+    if(DateRange == null) {
+    setReportingPeriodDateRange([null, null]);
+    } else {
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
     }
+  };
 
-  var getValidReportingPeriodBeginsDatetimes = function (currentDate) {
+  let onReportingPeriodClean = event => {
-    return currentDate.isBefore(moment(reportingPeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
+    setReportingPeriodDateRange([null, null]);
-  }
+  };
-
-  var getValidReportingPeriodEndsDatetimes = function (currentDate) {
-    return currentDate.isAfter(moment(reportingPeriodBeginsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
-  }
 
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
     console.log('handleSubmit');
     console.log(selectedSpaceID);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
 
     // disable submit button
     setSubmitButtonDisabled(true);
@@ -152,8 +163,8 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
     let isResponseOK = false;
     fetch(APIBaseURL + '/reports/meterbatch?' +
       'spaceid=' + selectedSpaceID +
-      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+      '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
-      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
+      '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
       method: 'GET',
       headers: {
         "Content-type": "application/json",
@@ -227,7 +238,6 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
         setSpinnerHidden(true);
         // show export button
         setExportButtonHidden(false);
-          
       } else {
         toast.error(json.description)
       }
@@ -280,29 +290,22 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
                   </Cascader>
                 </FormGroup>
               </Col>
-              
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
+                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
-                    {t('Reporting Period Begins')}
+                  <br/>
-                  </Label>
+                  <DateRangePicker
-                  <Datetime id='reportingPeriodBeginsDatetime'
+                    id='reportingPeriodDateRangePicker'
-                    value={reportingPeriodBeginsDatetime}
+                    format="yyyy-MM-dd hh:mm aa"
-                    onChange={onReportingPeriodBeginsDatetimeChange}
+                    value={reportingPeriodDateRange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
+                    onChange={onReportingPeriodChange}
-                    closeOnSelect={true} />
+                    size="md"
-                </FormGroup>
+                    style={dateRangePickerStyle}
-              </Col>
+                    onClean={onReportingPeriodClean}
-              <Col xs={6} sm={3}>
+                    locale={dateRangePickerLocale}
-                <FormGroup className="form-group">
+                    showMeridian
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
+                    placeholder={t("Select Date Range")}
-                    {t('Reporting Period Ends')}
+                  />
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterSubmetersBalance.js

@@ -16,10 +16,9 @@ import {
   Spinner,
 } from 'reactstrap';
 import CountUp from 'react-countup';
-import Datetime from 'react-datetime';
+import Cascader from 'rc-cascader';
 import moment from 'moment';
 import loadable from '@loadable/component';
-import Cascader from 'rc-cascader';
 import CardSummary from '../common/CardSummary';
 import LineChart from '../common/LineChart';
 import { getCookieValue, createCookie } from '../../../helpers/utils';
@@ -29,7 +28,7 @@ import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { periodTypeOptions } from '../common/PeriodTypeOptions';
-
+import { DateRangePicker } from 'rsuite';
 
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
@@ -62,9 +61,25 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
   const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
   const [periodType, setPeriodType] = useState('daily');
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
+  const dateRangePickerLocale = {
+    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 dateRangePickerStyle = { display: 'block', zIndex: 10};
 
   // buttons
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@@ -222,21 +237,18 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
     };
   };
 
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodChange = (DateRange) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
+    if(DateRange == null) {
+    setReportingPeriodDateRange([null, null]);
+    } else {
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
+    }
   };
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodClean = event => {
-    setReportingPeriodEndsDatetime(newDateTime);
+    setReportingPeriodDateRange([null, null]);
   };
 
-  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'));
-  }
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
@@ -244,8 +256,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
     console.log(selectedSpaceID);
     console.log(selectedMeter);
     console.log(periodType);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
 
     // disable submit button
     setSubmitButtonDisabled(true);  
@@ -261,8 +273,8 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
     fetch(APIBaseURL + '/reports/metersubmetersbalance?' +
       'meterid=' + selectedMeter +
       '&periodtype=' + periodType +
-      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+      '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
-      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
+      '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
       method: 'GET',
       headers: {
         "Content-type": "application/json",
@@ -449,26 +461,20 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
+                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
-                    {t('Reporting Period Begins')}
+                  <br/>
-                  </Label>
+                  <DateRangePicker
-                  <Datetime id='reportingPeriodBeginsDatetime'
+                    id='reportingPeriodDateRangePicker'
-                    value={reportingPeriodBeginsDatetime}
+                    format="yyyy-MM-dd hh:mm aa"
-                    onChange={onReportingPeriodBeginsDatetimeChange}
+                    value={reportingPeriodDateRange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
+                    onChange={onReportingPeriodChange}
-                    closeOnSelect={true} />
+                    size="md"
-                </FormGroup>
+                    style={dateRangePickerStyle}
-              </Col>
+                    onClean={onReportingPeriodClean}
-              <Col xs={6} sm={3}>
+                    locale={dateRangePickerLocale}
-                <FormGroup className="form-group">
+                    showMeridian
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
+                    placeholder={t("Select Date Range")}
-                    {t('Reporting Period Ends')}
+                  />
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterTracking.js

@@ -20,6 +20,7 @@ import {
   Spinner,
 } from 'reactstrap';
 import Cascader from 'rc-cascader';
+import moment from "moment";
 import loadable from '@loadable/component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
@@ -30,8 +31,7 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
-import Datetime from "react-datetime";
+import { DateRangePicker } from 'rsuite';
-import moment from "moment";
 
 
 const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
@@ -57,22 +57,39 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
   let table = createRef();
   // State
   const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
+  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);
   const [meterList, setMeterList] = useState([]);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
-  const [spinnerHidden, setSpinnerHidden] = useState(false);
-  const [exportButtonHidden, setExportButtonHidden] = useState(true);
-  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
-  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined)
 
   //Query From
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
+  const dateRangePickerLocale = {
+    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 dateRangePickerStyle = { display: 'block', zIndex: 10};
 
   // buttons
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
+  const [spinnerHidden, setSpinnerHidden] = useState(false);
+  const [exportButtonHidden, setExportButtonHidden] = useState(true);
+
+  // Results
+  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
 
   useEffect(() => {
-    // begin of getting space tree
     let isResponseOK = false;
     fetch(APIBaseURL + '/spaces/tree', {
       method: 'GET',
@@ -107,7 +124,6 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
     }).catch(err => {
       console.log(err);
     });
-    // end of getting space tree
 
   }, []);
   const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
@@ -206,31 +222,25 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
     setSubmitButtonDisabled(false);
   };
 
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodChange = (DateRange) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
+    if(DateRange == null) {
-
+    setReportingPeriodDateRange([null, null]);
+    } else {
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
     }
+  };
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodClean = event => {
-    setReportingPeriodEndsDatetime(newDateTime);
+    setReportingPeriodDateRange([null, null]);
-
+  };
-  }
-
-  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'));
-  }
 
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
     console.log('handleSubmit');
     console.log(selectedSpaceID);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
 
     // disable submit button
     setSubmitButtonDisabled(true);
@@ -239,13 +249,14 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
     // hide export button
     setExportButtonHidden(true)
 
+    // Reinitialize tables
     setMeterList([]);
 
     let isResponseOK = false;
       fetch(APIBaseURL + '/reports/metertracking?' +
         'spaceid=' + selectedSpaceID +
-        '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+        '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
-        '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
+        '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
         method: 'GET',
         headers: {
           "Content-type": "application/json",
@@ -277,12 +288,12 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
 
           setExcelBytesBase64(json['excel_bytes_base64']);
 
+          // enable submit button
+          setSubmitButtonDisabled(false);
           // hide spinner
           setSpinnerHidden(true);
           // show export button
           setExportButtonHidden(false);
-
-          setSubmitButtonDisabled(false);
         } else {
           toast.error(json.description)
         }
@@ -335,26 +346,20 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
+                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
-                    {t('Reporting Period Begins')}
+                  <br/>
-                  </Label>
+                  <DateRangePicker
-                  <Datetime id='reportingPeriodBeginsDatetime'
+                    id='reportingPeriodDateRangePicker'
-                    value={reportingPeriodBeginsDatetime}
+                    format="yyyy-MM-dd hh:mm aa"
-                    onChange={onReportingPeriodBeginsDatetimeChange}
+                    value={reportingPeriodDateRange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
+                    onChange={onReportingPeriodChange}
-                    closeOnSelect={true} />
+                    size="md"
-                </FormGroup>
+                    style={dateRangePickerStyle}
-              </Col>
+                    onClean={onReportingPeriodClean}
-              <Col xs={6} sm={3}>
+                    locale={dateRangePickerLocale}
-                <FormGroup className="form-group">
+                    showMeridian
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
+                    placeholder={t("Select Date Range")}
-                    {t('Reporting Period Ends')}
+                  />
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
                 </FormGroup>
               </Col>
               <Col xs="auto">

web/src/components/MyEMS/Meter/MeterTrend.js

@@ -15,10 +15,9 @@ import {
   CustomInput,
   Spinner,
 } from 'reactstrap';
-import Datetime from 'react-datetime';
+import Cascader from 'rc-cascader';
 import moment from 'moment';
 import loadable from '@loadable/component';
-import Cascader from 'rc-cascader';
 import LineChart from '../common/LineChart';
 import { getCookieValue, createCookie } from '../../../helpers/utils';
 import withRedirect from '../../../hoc/withRedirect';
@@ -26,7 +25,7 @@ import { withTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
-
+import { DateRangePicker } from 'rsuite';
 
 const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
 
@@ -58,9 +57,25 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
   const [meterList, setMeterList] = useState([]);
   const [filteredMeterList, setFilteredMeterList] = useState([]);
   const [selectedMeter, setSelectedMeter] = useState(undefined);
-  const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('day'));
-  const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
+  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);
+  const dateRangePickerLocale = {
+    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 dateRangePickerStyle = { display: 'block', zIndex: 10};
 
   // buttons
   const [submitButtonDisabled, setSubmitButtonDisabled] = useState(true);
@@ -212,29 +227,26 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
     };
   };
 
-  let onReportingPeriodBeginsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodChange = (DateRange) => {
-    setReportingPeriodBeginsDatetime(newDateTime);
+    if(DateRange == null) {
+    setReportingPeriodDateRange([null, null]);
+    } else {
+      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);
+    }
   };
 
-  let onReportingPeriodEndsDatetimeChange = (newDateTime) => {
+  let onReportingPeriodClean = event => {
-    setReportingPeriodEndsDatetime(newDateTime);
+    setReportingPeriodDateRange([null, null]);
   };
   
-  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'));
-  }
   // Handler
   const handleSubmit = e => {
     e.preventDefault();
     console.log('handleSubmit');
     console.log(selectedSpaceID);
     console.log(selectedMeter);
-    console.log(reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))
-    console.log(reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'));
+    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));
 
     // disable submit button
     setSubmitButtonDisabled(true); 
@@ -249,8 +261,8 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
     let isResponseOK = false;
     fetch(APIBaseURL + '/reports/metertrend?' +
       'meterid=' + selectedMeter +
-      '&reportingperiodstartdatetime=' + reportingPeriodBeginsDatetime.format('YYYY-MM-DDTHH:mm:ss') +
+      '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +
-      '&reportingperiodenddatetime=' + reportingPeriodEndsDatetime.format('YYYY-MM-DDTHH:mm:ss'), {
+      '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {
       method: 'GET',
       headers: {
         "Content-type": "application/json",
@@ -413,26 +425,20 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
               </Col>
               <Col xs={6} sm={3}>
                 <FormGroup className="form-group">
-                  <Label className={labelClasses} for="reportingPeriodBeginsDatetime">
+                  <Label className={labelClasses}>{t('Reporting Period')}</Label>
-                    {t('Reporting Period Begins')}
+                  <br/>
-                  </Label>
+                  <DateRangePicker
-                  <Datetime id='reportingPeriodBeginsDatetime'
+                    id='reportingPeriodDateRangePicker'
-                    value={reportingPeriodBeginsDatetime}
+                    format="yyyy-MM-dd hh:mm aa"
-                    onChange={onReportingPeriodBeginsDatetimeChange}
+                    value={reportingPeriodDateRange}
-                    isValidDate={getValidReportingPeriodBeginsDatetimes}
+                    onChange={onReportingPeriodChange}
-                    closeOnSelect={true} />
+                    size="md"
-                </FormGroup>
+                    style={dateRangePickerStyle}
-              </Col>
+                    onClean={onReportingPeriodClean}
-              <Col xs={6} sm={3}>
+                    locale={dateRangePickerLocale}
-                <FormGroup className="form-group">
+                    showMeridian
-                  <Label className={labelClasses} for="reportingPeriodEndsDatetime">
+                    placeholder={t("Select Date Range")}
-                    {t('Reporting Period Ends')}
+                  />
-                  </Label>
-                  <Datetime id='reportingPeriodEndsDatetime'
-                    value={reportingPeriodEndsDatetime}
-                    onChange={onReportingPeriodEndsDatetimeChange}
-                    isValidDate={getValidReportingPeriodEndsDatetimes}
-                    closeOnSelect={true} />
                 </FormGroup>
               </Col>
               <Col xs="auto">