fixed DateRangePicker styles

web/src/assets/scss/_user.scss

@@ -15,6 +15,7 @@
     border-radius: 6px;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
     white-space: nowrap;
+    z-index: 2000;
   }
   .rc-cascader-menus-hidden {
     display: none;

web/src/assets/scss/theme/plugins/_react-datetime.scss

@@ -23,3 +23,38 @@
     }
   }
 }
+
+.rs-picker-has-value,
+.rs-btn,
+.rs-picker-toggle-value,
+.rs-picker-has-value,
+.rs-picker-toggle,
+.rs-picker-toggle-value{color:$gray-300 !important;}
+
+.rs-picker-toggle-textbox {color: $gray-800;background-color: $white !important;}
+
+.rs-picker-toggle-value{font-size: 1rem;line-height: 1.3;color: $gray-900!important;}
+
+.rs-picker-has-value,
+.rs-btn,
+.rs-picker-toggle-value,
+.rs-picker-has-value,
+.rs-picker-toggle,
+.rs-picker-toggle-value{color: $gray-900 !important;}
+
+.rs-picker-default,
+.rs-picker-toggle,
+.rs-picker-input,
+.rs-picker-input,
+.rs-picker-toggle {--rs-input-bg:$white;background-color: $white;border: 1px solid $white !important;}
+
+.rs-picker-default:not(.rs-picker-disabled),
+.rs-btn-active,
+.rs-picker-default:not(.rs-picker-disabled),
+.rs-btn:focus, .rs-picker-default:not(.rs-picker-disabled),
+.rs-btn:hover, .rs-picker-default:not(.rs-picker-disabled),
+.rs-picker-toggle-active, .rs-picker-default:not(.rs-picker-disabled),
+.rs-picker-toggle:focus, .rs-picker-default:not(.rs-picker-disabled),
+
+
+.rs-picker-toggle:hover {border-color: $white !important;}

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

@@ -67,8 +67,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
   const [periodType, setPeriodType] = useState('daily');
   const [basePeriodBeginsDatetime, setBasePeriodBeginsDatetime] = useState(current_moment.clone().subtract(1, 'months').startOf('month'));
   const [basePeriodEndsDatetime, setBasePeriodEndsDatetime] = useState(current_moment.clone().subtract(1, 'months'));
-  const [basePeriodBeginsDatetimeDisabled, setBasePeriodBeginsDatetimeDisabled] = useState(true);
+  const [basePeriodDatetimeDisabled, setBasePeriodDatetimeDisabled] = useState(true);
-  const [basePeriodEndsDatetimeDisabled, setBasePeriodEndsDatetimeDisabled] = useState(true);
   const [reportingPeriodBeginsDatetime, setReportingPeriodBeginsDatetime] = useState(current_moment.clone().startOf('month'));
   const [reportingPeriodEndsDatetime, setReportingPeriodEndsDatetime] = useState(current_moment);
   const [cascaderOptions, setCascaderOptions] = useState(undefined);
@@ -96,6 +95,24 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
   const [detailedDataTableData, setDetailedDataTableData] = useState([]);
   const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);
   const [values, setValues] = useState([reportingPeriodBeginsDatetime.toDate(), reportingPeriodEndsDatetime.toDate()]);
+  const [baseValues, setBaseValues] = useState([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]);
+  const local = {
+    sunday: t('sunday'),
+    monday: t('monday'),
+    tuesday: t('tuesday'),
+    wednesday: t('wednesday'),
+    thursday: t('thursday'),
+    friday: t('friday'),
+    saturday: t('friday'),
+    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;
@@ -218,24 +235,21 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     console.log(target.value);
     setComparisonType(target.value);
     if (target.value === 'year-over-year') {
-      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
       setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'years'));
       setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'years'));
     } else if (target.value === 'month-on-month') {
-      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
       setBasePeriodBeginsDatetime(moment(reportingPeriodBeginsDatetime).subtract(1, 'months'));
       setBasePeriodEndsDatetime(moment(reportingPeriodEndsDatetime).subtract(1, 'months'));
     } else if (target.value === 'free-comparison') {
-      setBasePeriodBeginsDatetimeDisabled(false);
+      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(false);
     } else if (target.value === 'none-comparison') {
       setBasePeriodBeginsDatetime(undefined);
       setBasePeriodEndsDatetime(undefined);
-      setBasePeriodBeginsDatetimeDisabled(true);
+      setBasePeriodDatetimeDisabled(true);
-      setBasePeriodEndsDatetimeDisabled(true);
     }
+    setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]);
   };
 
   const onSearchMeter = ({ target }) => {
@@ -255,12 +269,12 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     };
   };
 
-  let onBasePeriodBeginsDatetimeChange = (newDateTime) => {
+  let onBasePeriodChange = (DateRange) => {
-    setBasePeriodBeginsDatetime(newDateTime);
+    let startDate = moment(DateRange[0]);
-  };
+    let endDate = moment(DateRange[1]);
-
+    setValues([DateRange[0], DateRange[1]]);
-  let onBasePeriodEndsDatetimeChange = (newDateTime) => {
+    setReportingPeriodBeginsDatetime(startDate);
-    setBasePeriodEndsDatetime(newDateTime);
+    setReportingPeriodEndsDatetime(endDate);
   };
 
   let onChange = (DateRange) => {
@@ -279,26 +293,15 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
     } else if (comparisonType === 'month-on-month') {
       setBasePeriodEndsDatetime(endDate.clone().subtract(1, 'months'));
     }
+    setBaseValues([basePeriodBeginsDatetime.toDate(), basePeriodEndsDatetime.toDate()]);
   };
 
   let onClean = event => {
     setValues([]);
   };
 
-  var getValidBasePeriodBeginsDatetimes = function (currentDate) {
+  let onBaseClean = event => {
-    return currentDate.isBefore(moment(basePeriodEndsDatetime, 'MM/DD/YYYY, hh:mm:ss a'));
+    setValues([]);
-  };
-
-  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'));
   };
 
   // Handler
@@ -540,27 +543,19 @@ const MeterEnergy = ({ 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'
+                  <DateRangePicker
-                    value={basePeriodBeginsDatetime}
+                    readOnly={basePeriodDatetimeDisabled}
-                    inputProps={{ disabled: basePeriodBeginsDatetimeDisabled }}
+                    format="MM/dd/yyyy hh:mm aa"
-                    onChange={onBasePeriodBeginsDatetimeChange}
+                    value={baseValues}
-                    isValidDate={getValidBasePeriodBeginsDatetimes}
+                    onChange={onBasePeriodChange}
-                    closeOnSelect={true} />
+                    size="md"
-                </FormGroup>
+                    style={styles}
-              </Col>
+                    onClean={onBaseClean}
-              <Col xs={6} sm={3}>
+                    locale={local}
-                <FormGroup className="form-group">
+                    showMeridian
-                  <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}>
@@ -570,17 +565,19 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
                   <DateRangePicker
                     format="MM/dd/yyyy hh:mm aa"
                     value={values}
-                    size="sm"
+                    size="md"
+                    style={styles}
                     onChange={onChange}
                     showMeridian
                     placeholder="Select Date Range"
                     onClean={onClean}
+                    locale={local}
                   />
                 </FormGroup>
               </Col>
               <Col xs="auto">
                 <FormGroup>
-                  <br></br>
+                  <br/>
                   <ButtonGroup id="submit">
                     <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>
                   </ButtonGroup>

web/src/i18n.js

@@ -786,7 +786,21 @@ const resources = {
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
       'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
-
+      //DateRangePicker
+      'sunday': 'Su',
+      'monday': 'Mo',
+      'tuesday': 'Tu',
+      'wednesday': 'We',
+      'thursday': 'Th',
+      'friday': 'Fr',
+      'saturday': 'Sa',
+      'ok': 'OK',
+      'today': 'Today',
+      'yesterday': 'Yesterday',
+      'hours': 'Hours',
+      'minutes': 'Minutes',
+      'seconds': 'Seconds',
+      'last7Days': 'Last 7 Days'
     }
   },
   de: {
@@ -1582,6 +1596,21 @@ const resources = {
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
       'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
+      //DateRangePicker
+      'sunday': 'So',
+      'monday': 'Mo',
+      'tuesday': 'Di',
+      'wednesday': 'Mi',
+      'thursday': 'Do',
+      'friday': 'Fr',
+      'saturday': 'Sa',
+      'ok': 'OKAY',
+      'today': 'Heute',
+      'yesterday': 'Gestern',
+      'hours': 'Stunden',
+      'minutes': 'Protokoll',
+      'seconds': 'Nachschlag',
+      'last7Days': 'Letzte 7 Tage'
     }
   },
   zh_CN: {
@@ -2349,7 +2378,22 @@ const resources = {
       'API.VIRTUAL_METER_OF_VARIABLE_NOT_FOUND': 'Virtual meter of variable not found',
       'API.VIRTUAL_POINT_SHOULD_BE_ANALOG_VALUE': 'Virtual point should be analog value',
       'API.WEB_MESSAGE_NOT_FOUND': 'Web message not found',
-      'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found'
+      'API.WECHAT_MESSAGE_NOT_FOUND': 'Wechat message not found',
+      //DateRangePicker
+      'sunday': '日',
+      'monday': '一',
+      'tuesday': '二',
+      'wednesday': '三',
+      'thursday': '四',
+      'friday': '五',
+      'saturday': '六',
+      'ok': '确定',
+      'today': '今天',
+      'yesterday': '昨天',
+      'hours': '时',
+      'minutes': '分',
+      'seconds': '秒',
+      'last7Days': '最近七天',
     }
   }
 };