updated DateRangePicker for Meter reports in Web UI

pull/129/head
13621160019@163.com 2022-02-27 14:03:27 +08:00
parent 7c4cd668b6
commit afc36b98ea
12 changed files with 25 additions and 41 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>