updated DateRangePicker for Meter reports in Web UI
parent
7c4cd668b6
commit
afc36b98ea
|
@ -296,14 +296,13 @@ const MeterBatch = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -531,14 +531,13 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -549,14 +548,13 @@ const MeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -531,14 +531,13 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -549,14 +548,13 @@ const MeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -261,6 +261,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
}
|
||||
};
|
||||
|
||||
// Callback fired when value changed
|
||||
let onBasePeriodChange = (DateRange) => {
|
||||
console.log(DateRange);
|
||||
|
||||
|
@ -271,6 +272,7 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
}
|
||||
};
|
||||
|
||||
// Callback fired when value changed
|
||||
let onReportingPeriodChange = (DateRange) => {
|
||||
if(DateRange == null) {
|
||||
setReportingPeriodDateRange([null, null]);
|
||||
|
@ -284,14 +286,16 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
}
|
||||
};
|
||||
|
||||
// Callback fired when value clean
|
||||
let onBasePeriodClean = event => {
|
||||
setBasePeriodDateRange([null, null]);
|
||||
};
|
||||
|
||||
// Callback fired when value clean
|
||||
let onReportingPeriodClean = event => {
|
||||
setReportingPeriodDateRange([null, null]);
|
||||
};
|
||||
|
||||
|
||||
// Handler
|
||||
const handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
|
@ -536,14 +540,13 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -554,14 +557,13 @@ const MeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -465,14 +465,13 @@ const MeterSubmetersBalance = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -350,14 +350,13 @@ const MeterTracking = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -429,14 +429,13 @@ const MeterTrend = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -507,14 +507,13 @@ const OfflineMeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -525,14 +524,13 @@ const OfflineMeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -509,14 +509,13 @@ const OfflineMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -527,14 +526,13 @@ const OfflineMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -506,14 +506,13 @@ const VirtualMeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -524,14 +523,13 @@ const VirtualMeterCarbon = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -507,14 +507,13 @@ const VirtualMeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -525,14 +524,13 @@ const VirtualMeterCost = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
|
@ -508,14 +508,13 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<DateRangePicker
|
||||
id='basePeriodDateRangePicker'
|
||||
readOnly={basePeriodDateRangePickerDisabled}
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={basePeriodDateRange}
|
||||
onChange={onBasePeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onBasePeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
@ -526,14 +525,13 @@ const VirtualMeterEnergy = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<br/>
|
||||
<DateRangePicker
|
||||
id='reportingPeriodDateRangePicker'
|
||||
format="yyyy-MM-dd hh:mm aa"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value={reportingPeriodDateRange}
|
||||
onChange={onReportingPeriodChange}
|
||||
size="md"
|
||||
style={dateRangePickerStyle}
|
||||
onClean={onReportingPeriodClean}
|
||||
locale={dateRangePickerLocale}
|
||||
showMeridian
|
||||
placeholder={t("Select Date Range")}
|
||||
/>
|
||||
</FormGroup>
|
||||
|
|
Loading…
Reference in New Issue