This is an automated email from the ASF dual-hosted git repository.
ppawar pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/atlas.git
The following commit(s) were added to refs/heads/master by this push:
new 570dae218 ATLAS-5046: [React UI] Fix Duplicate Display Issues in
Calendar: Month/Year and Time Selection (#365)
570dae218 is described below
commit 570dae2181bc1c03e0fee0374d54d6445911553b
Author: Brijesh Bhalala <32086209+brijesh...@users.noreply.github.com>
AuthorDate: Fri Jun 6 13:15:21 2025 +0530
ATLAS-5046: [React UI] Fix Duplicate Display Issues in Calendar: Month/Year
and Time Selection (#365)
---
dashboard/package-lock.json | 85 ++-------------
dashboard/package.json | 3 +-
.../src/components/DatePicker/CustomDatePicker.tsx | 41 +++++++
.../src/components/DatePicker/CustomHeader.tsx | 118 +++++++++++++++++++++
dashboard/src/components/Forms/FormDatepicker.tsx | 8 +-
.../TagFilters/TagCustomValueEditor.tsx | 23 ++--
.../TypeFilters/TypeCustomValueEditor.tsx | 54 ++--------
.../src/components/ShowMore/DrawerBodyChipView.tsx | 2 +-
dashboard/src/index.scss | 8 +-
dashboard/src/styles/customdatepPicker.scss | 38 +++++++
.../Audits/AuditsFilter/AuditFilters.tsx | 32 ++++--
.../src/views/Classification/AddValidityPeriod.tsx | 28 ++---
.../PropertiesTab/BMAttributesFields.tsx | 14 +--
13 files changed, 270 insertions(+), 184 deletions(-)
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
index 6b0e58a96..616bf9a3d 100644
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -15,7 +15,6 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.13",
"@mui/material": "^5.15.13",
- "@mui/x-date-pickers": "^7.16.0",
"@mui/x-tree-view": "^7.0.0",
"@react-querybuilder/material": "^8.0.0",
"@reduxjs/toolkit": "^2.2.6",
@@ -33,7 +32,7 @@
"moment-timezone": "^0.5.45",
"platform": "^1.3.4",
"react": "^18.3.1",
- "react-datepicker": "^7.5.0",
+ "react-datepicker": "^8.4.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.53.0",
@@ -1754,72 +1753,6 @@
}
}
},
- "node_modules/@mui/x-date-pickers": {
- "version": "7.29.2",
- "resolved":
"https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.29.2.tgz";,
- "integrity":
"sha512-GRbLE31bBktJptittYk5L5SdwOOcDdVAIrXfyYYQ6xq8CR69Sbi/y6WkSDL+FDuymM/UQa7f5UmHb6r81aDVWA==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.25.7",
- "@mui/utils": "^5.16.6 || ^6.0.0 || ^7.0.0",
- "@mui/x-internals": "7.29.0",
- "@types/react-transition-group": "^4.4.11",
- "clsx": "^2.1.1",
- "prop-types": "^15.8.1",
- "react-transition-group": "^4.4.5"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org";
- },
- "peerDependencies": {
- "@emotion/react": "^11.9.0",
- "@emotion/styled": "^11.8.1",
- "@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
- "@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
- "date-fns": "^2.25.0 || ^3.2.0 || ^4.0.0",
- "date-fns-jalali": "^2.13.0-0 || ^3.2.0-0 || ^4.0.0-0",
- "dayjs": "^1.10.7",
- "luxon": "^3.0.2",
- "moment": "^2.29.4",
- "moment-hijri": "^2.1.2 || ^3.0.0",
- "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@emotion/react": {
- "optional": true
- },
- "@emotion/styled": {
- "optional": true
- },
- "date-fns": {
- "optional": true
- },
- "date-fns-jalali": {
- "optional": true
- },
- "dayjs": {
- "optional": true
- },
- "luxon": {
- "optional": true
- },
- "moment": {
- "optional": true
- },
- "moment-hijri": {
- "optional": true
- },
- "moment-jalaali": {
- "optional": true
- }
- }
- },
"node_modules/@mui/x-internals": {
"version": "7.29.0",
"resolved":
"https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.29.0.tgz";,
@@ -5269,9 +5202,9 @@
}
},
"node_modules/date-fns": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz";,
- "integrity":
"sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz";,
+ "integrity":
"sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
"license": "MIT",
"funding": {
"type": "github",
@@ -9076,14 +9009,14 @@
}
},
"node_modules/react-datepicker": {
- "version": "7.6.0",
- "resolved":
"https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.6.0.tgz";,
- "integrity":
"sha512-9cQH6Z/qa4LrGhzdc3XoHbhrxNcMi9MKjZmYgF/1MNNaJwvdSjv3Xd+jjvrEEbKEf71ZgCA3n7fQbdwd70qCRw==",
+ "version": "8.4.0",
+ "resolved":
"https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz";,
+ "integrity":
"sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
"license": "MIT",
"dependencies": {
- "@floating-ui/react": "^0.27.0",
+ "@floating-ui/react": "^0.27.3",
"clsx": "^2.1.1",
- "date-fns": "^3.6.0"
+ "date-fns": "^4.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
diff --git a/dashboard/package.json b/dashboard/package.json
index e01b11683..e452e7d1c 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -17,7 +17,6 @@
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.13",
"@mui/material": "^5.15.13",
- "@mui/x-date-pickers": "^7.16.0",
"@mui/x-tree-view": "^7.0.0",
"@react-querybuilder/material": "^8.0.0",
"@reduxjs/toolkit": "^2.2.6",
@@ -35,7 +34,7 @@
"moment-timezone": "^0.5.45",
"platform": "^1.3.4",
"react": "^18.3.1",
- "react-datepicker": "^7.5.0",
+ "react-datepicker": "^8.4.0",
"react-dom": "^18.2.0",
"react-dropzone": "^14.2.3",
"react-hook-form": "^7.53.0",
diff --git a/dashboard/src/components/DatePicker/CustomDatePicker.tsx
b/dashboard/src/components/DatePicker/CustomDatePicker.tsx
new file mode 100644
index 000000000..8409660cb
--- /dev/null
+++ b/dashboard/src/components/DatePicker/CustomDatePicker.tsx
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+import CustomHeader from "./CustomHeader";
+
+const CustomDatepicker = (props: {
+ [x: string]: any;
+ selected?: any;
+ onChange?: any;
+}) => {
+ const { selected, onChange, ...rest } = props;
+
+ return (
+ <DatePicker
+ selected={selected}
+ onChange={onChange}
+ timeInputLabel=""
+ renderCustomHeader={(headerProps) => <CustomHeader {...headerProps} />}
+ dateFormat="MM/dd/yyyy h:mm:ss aa"
+ {...rest}
+ />
+ );
+};
+
+export default CustomDatepicker;
diff --git a/dashboard/src/components/DatePicker/CustomHeader.tsx
b/dashboard/src/components/DatePicker/CustomHeader.tsx
new file mode 100644
index 000000000..2fd6d0025
--- /dev/null
+++ b/dashboard/src/components/DatePicker/CustomHeader.tsx
@@ -0,0 +1,118 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormControl, IconButton, NativeSelect, Stack } from "@mui/material";
+import { getYear, getMonth } from "date-fns";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+
+const years = Array.from(
+ { length: 100 },
+ (_, i) => new Date().getFullYear() - 50 + i
+);
+const months = [
+ "January",
+ "February",
+ "March",
+ "April",
+ "May",
+ "June",
+ "July",
+ "August",
+ "September",
+ "October",
+ "November",
+ "December"
+];
+
+type CustomHeaderProps = {
+ date: Date;
+ changeYear: (year: number) => void;
+ changeMonth: (month: number) => void;
+ decreaseMonth: () => void;
+ increaseMonth: () => void;
+ prevMonthButtonDisabled: boolean;
+ nextMonthButtonDisabled: boolean;
+};
+
+const CustomHeader = ({
+ date,
+ changeYear,
+ changeMonth,
+ decreaseMonth,
+ increaseMonth,
+ prevMonthButtonDisabled,
+ nextMonthButtonDisabled
+}: CustomHeaderProps) => {
+ return (
+ <Stack
+ direction="row"
+ spacing={1}
+ alignItems="center"
+ justifyContent="center"
+ sx={{ margin: 1 }}
+ >
+ <IconButton
+ size="small"
+ onClick={decreaseMonth}
+ disabled={prevMonthButtonDisabled}
+ >
+ <ArrowBackIosIcon fontSize="inherit" />
+ </IconButton>
+ <Stack minWidth={"60px"}>
+ <FormControl fullWidth>
+ <NativeSelect
+ value={getYear(date)}
+ onChange={({ target: { value } }) => changeYear(parseInt(value))}
+ >
+ {" "}
+ {years.map((year) => (
+ <option className="text-center" key={year} value={year}>
+ {year}
+ </option>
+ ))}
+ </NativeSelect>
+ </FormControl>
+ </Stack>
+
+ <FormControl fullWidth>
+ <NativeSelect
+ value={months[getMonth(date)]}
+ onChange={({ target: { value } }) =>
+ changeMonth(months.indexOf(value))
+ }
+ >
+ {months.map((month) => (
+ <option className="text-center" key={month} value={month}>
+ {month}
+ </option>
+ ))}
+ </NativeSelect>
+ </FormControl>
+
+ <IconButton
+ size="small"
+ onClick={increaseMonth}
+ disabled={nextMonthButtonDisabled}
+ >
+ <ArrowForwardIosIcon fontSize="inherit" />
+ </IconButton>
+ </Stack>
+ );
+};
+
+export default CustomHeader;
diff --git a/dashboard/src/components/Forms/FormDatepicker.tsx
b/dashboard/src/components/Forms/FormDatepicker.tsx
index 20338d541..eae6882c2 100644
--- a/dashboard/src/components/Forms/FormDatepicker.tsx
+++ b/dashboard/src/components/Forms/FormDatepicker.tsx
@@ -21,7 +21,7 @@ import { Controller } from "react-hook-form";
import { LightTooltip } from "@components/muiComponents";
import moment from "moment-timezone";
import { useEffect, useState } from "react";
-import DatePicker from "react-datepicker";
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
const FormDatepicker = ({ data, control, fieldName }: any) => {
const { name, isOptional, typeName } = data;
@@ -71,17 +71,15 @@ const FormDatepicker = ({ data, control, fieldName }: any)
=> {
</LightTooltip>
</div>
<div className="w-100">
- <DatePicker
+ <CustomDatepicker
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
selected={
value && moment(value).isValid()
? moment(value).toDate()
: moment().toDate()
}
- onChange={(date) => {
+ onChange={(date: { getTime: () => any }) => {
onChange(date ? date.getTime() : null);
}}
ref={ref}
diff --git
a/dashboard/src/components/QueryBuilder/TagFilters/TagCustomValueEditor.tsx
b/dashboard/src/components/QueryBuilder/TagFilters/TagCustomValueEditor.tsx
index 720abbd00..3b1805771 100644
--- a/dashboard/src/components/QueryBuilder/TagFilters/TagCustomValueEditor.tsx
+++ b/dashboard/src/components/QueryBuilder/TagFilters/TagCustomValueEditor.tsx
@@ -15,6 +15,7 @@
* limitations under the License.
*/
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
import { useAppSelector } from "@hooks/reducerHook";
import { Autocomplete, TextField } from "@mui/material";
@@ -22,7 +23,6 @@ import { timeRangeOptions } from "@utils/Enum";
import { isEmpty } from "@utils/Utils";
import moment from "moment";
import { useState } from "react";
-import DatePicker from "react-datepicker";
import { ValueEditorProps, ValueEditor } from "react-querybuilder";
export const TagCustomValueEditor = (props: ValueEditorProps) => {
@@ -117,16 +117,13 @@ export const TagCustomValueEditor = (props:
ValueEditorProps) => {
))}
</select>
{showDatePicker && (
- <DatePicker
+ <CustomDatepicker
selectsRange
- showTimeSelect
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
startDate={
moment(startDate).isValid()
? moment(startDate).toDate()
@@ -153,22 +150,18 @@ export const TagCustomValueEditor = (props:
ValueEditorProps) => {
}
if (props.inputType == "datetime-local") {
+ if (!selectedDateValue) {
+ const now = moment();
+ setSelectedDateValue(now);
+ props.handleOnChange(now.valueOf());
+ }
return (
- <DatePicker
- showTimeSelect
+ <CustomDatepicker
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
- startDate={
- moment(startDate).isValid() ? moment(startDate).toDate() : undefined
- }
- endDate={
- moment(endDate).isValid() ? moment(endDate).toDate() : undefined
- }
selected={
selectedDateValue && moment(selectedDateValue).isValid()
? moment(selectedDateValue).toDate()
diff --git
a/dashboard/src/components/QueryBuilder/TypeFilters/TypeCustomValueEditor.tsx
b/dashboard/src/components/QueryBuilder/TypeFilters/TypeCustomValueEditor.tsx
index 2dcd00245..b50bc2925 100644
---
a/dashboard/src/components/QueryBuilder/TypeFilters/TypeCustomValueEditor.tsx
+++
b/dashboard/src/components/QueryBuilder/TypeFilters/TypeCustomValueEditor.tsx
@@ -15,13 +15,13 @@
* limitations under the License.
*/
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
import { useAppSelector } from "@hooks/reducerHook";
import { Autocomplete, TextField } from "@mui/material";
import { timeRangeOptions } from "@utils/Enum";
import { isEmpty } from "@utils/Utils";
import moment from "moment";
import { useState } from "react";
-import DatePicker from "react-datepicker";
import { ValueEditorProps, ValueEditor } from "react-querybuilder";
export const TypeCustomValueEditor = (props: ValueEditorProps) => {
@@ -155,13 +155,14 @@ export const TypeCustomValueEditor = (props:
ValueEditorProps) => {
))}
</select>
{showDatePicker && (
- <DatePicker
+ <CustomDatepicker
selectsRange
- showTimeSelect
+ timeIntervals={1}
+ timeFormat="hh:mm aa"
+ timeCaption="Time"
+ shoowTimeInput
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
startDate={
moment(startDate).isValid()
? moment(startDate).toDate()
@@ -184,6 +185,7 @@ export const TypeCustomValueEditor = (props:
ValueEditorProps) => {
props.handleOnChange("");
}
}}
+ selected={undefined}
/>
)}
</div>
@@ -197,15 +199,12 @@ export const TypeCustomValueEditor = (props:
ValueEditorProps) => {
props.handleOnChange(now.valueOf());
}
return (
- <DatePicker
- showTimeSelect
+ <CustomDatepicker
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
selected={
selectedDateValue && moment(selectedDateValue).isValid()
? moment(selectedDateValue).toDate()
@@ -222,42 +221,5 @@ export const TypeCustomValueEditor = (props:
ValueEditorProps) => {
);
}
- if (props.inputType == "datetime-local") {
- if (selectedDateValue) {
- const now = moment();
- setSelectedDateValue(now);
- props.handleOnChange(now.toISOString());
- }
- return (
- <DatePicker
- showTimeSelect
- timeIntervals={1}
- timeFormat="hh:mm aa"
- timeCaption="Time"
- showPopperArrow={false}
- popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
- startDate={
- moment(startDate).isValid() ? moment(startDate).toDate() : undefined
- }
- endDate={
- moment(endDate).isValid() ? moment(endDate).toDate() : undefined
- }
- selected={
- selectedDateValue && moment(selectedDateValue).isValid()
- ? moment(selectedDateValue).toDate()
- : moment().toDate()
- }
- onChange={(date: Date | null) => {
- const value = date ? moment(date) : moment();
- setSelectedDateValue(value);
- props.handleOnChange(value.valueOf());
- }}
- dateFormat="MM/dd/yyyy h:mm:ss aa"
- showTimeInput
- />
- );
- }
return <ValueEditor {...props} />;
};
diff --git a/dashboard/src/components/ShowMore/DrawerBodyChipView.tsx
b/dashboard/src/components/ShowMore/DrawerBodyChipView.tsx
index 23ed21060..df40faf6b 100644
--- a/dashboard/src/components/ShowMore/DrawerBodyChipView.tsx
+++ b/dashboard/src/components/ShowMore/DrawerBodyChipView.tsx
@@ -25,7 +25,7 @@ import IconButton from "@mui/material/IconButton";
import Stack from "@mui/material/Stack";
import Chip from "@mui/material/Chip";
import Typography from "@mui/material/Typography";
-import { ClearIcon } from "@mui/x-date-pickers/icons";
+import ClearIcon from "@mui/icons-material/Clear";
import { fetchDetailPageData } from "@redux/slice/detailPageSlice";
import { fetchGlossaryDetails } from "@redux/slice/glossaryDetailsSlice";
import { fetchGlossaryData } from "@redux/slice/glossarySlice";
diff --git a/dashboard/src/index.scss b/dashboard/src/index.scss
index edb0a7bae..9c7cfd0a5 100644
--- a/dashboard/src/index.scss
+++ b/dashboard/src/index.scss
@@ -33,12 +33,8 @@
@use "@styles/stats.scss" as *;
@use "@styles/filters.scss" as *;
@use "@styles/errorPage.scss" as *;
-
-// body {
-// margin: 0;
-// padding: 0;
-// box-sizing: border-box;
-// }
+@use "@styles/errorPage.scss" as *;
+@use "@styles/customdatepPicker.scss" as *;
@font-face {
font-family: "Source Sans 3";
diff --git a/dashboard/src/styles/customdatepPicker.scss
b/dashboard/src/styles/customdatepPicker.scss
new file mode 100644
index 000000000..a3ef5bae1
--- /dev/null
+++ b/dashboard/src/styles/customdatepPicker.scss
@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.react-datepicker__month-container {
+ width: 100% !important;
+}
+.react-datepicker__input-time-container {
+ width: 100% !important;
+ margin: 0 0 10px 0 !important;
+ display: flex !important;
+ flex-direction: column !important;
+ align-items: center;
+}
+
+.react-datepicker__input-time-container
+ .react-datepicker-time__input-container
+ .react-datepicker-time__input {
+ margin: 0 !important;
+}
+
+.custom-time-input svg {
+ width: 0.875em !important;
+ height: 0.875em !important;
+}
diff --git
a/dashboard/src/views/Administrator/Audits/AuditsFilter/AuditFilters.tsx
b/dashboard/src/views/Administrator/Audits/AuditsFilter/AuditFilters.tsx
index 036d6ffb6..0248b5292 100644
--- a/dashboard/src/views/Administrator/Audits/AuditsFilter/AuditFilters.tsx
+++ b/dashboard/src/views/Administrator/Audits/AuditsFilter/AuditFilters.tsx
@@ -44,6 +44,7 @@ import { GlobalQueryState, isEmpty } from "@utils/Utils";
import { attributeFilter } from "@utils/CommonViewFunction";
import { cloneDeep } from "@utils/Helper";
import { timeRangeOptions } from "@utils/Enum";
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
const customOperators: Operator[] = [
...defaultOperators,
@@ -80,6 +81,7 @@ const CustomValueEditor: React.FC<ValueEditorProps> = (props)
=> {
return (
<div>
<select
+ className="rule-operators"
value={value}
onChange={(e) => handleTimeRangeChange(e.target.value)}
>
@@ -91,13 +93,14 @@ const CustomValueEditor: React.FC<ValueEditorProps> =
(props) => {
))}
</select>
{showDatePicker && (
- <DatePicker
+ <CustomDatepicker
selectsRange
- showTimeSelect
+ timeIntervals={1}
+ timeFormat="hh:mm aa"
+ timeCaption="Time"
+ shoowTimeInput
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
startDate={
moment(startDate).isValid()
? moment(startDate).toDate()
@@ -107,10 +110,20 @@ const CustomValueEditor: React.FC<ValueEditorProps> =
(props) => {
moment(endDate).isValid() ? moment(endDate).toDate() : undefined
}
onChange={(update: [Date | null, Date | null] | null) => {
- setDateRange(update);
- props.handleOnChange(update).join(",");
+ const safeUpdate: [Date | null, Date | null] = update ?? [
+ null,
+ null
+ ];
+ setDateRange(safeUpdate);
+ if (safeUpdate[0] && safeUpdate[1]) {
+ const startEpoch = moment(safeUpdate[0]).valueOf();
+ const endEpoch = moment(safeUpdate[1]).valueOf();
+ props.handleOnChange(`${startEpoch},${endEpoch}`);
+ } else {
+ props.handleOnChange("");
+ }
}}
- isClearable={true}
+ selected={undefined}
/>
)}
</div>
@@ -119,15 +132,12 @@ const CustomValueEditor: React.FC<ValueEditorProps> =
(props) => {
if (props.inputType == "datetime-local") {
return (
- <DatePicker
- showTimeSelect
+ <CustomDatepicker
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
selected={
selectedDateValue && moment(selectedDateValue).isValid()
? moment(selectedDateValue).toDate()
diff --git a/dashboard/src/views/Classification/AddValidityPeriod.tsx
b/dashboard/src/views/Classification/AddValidityPeriod.tsx
index 5aa227cf6..5e3a41fab 100644
--- a/dashboard/src/views/Classification/AddValidityPeriod.tsx
+++ b/dashboard/src/views/Classification/AddValidityPeriod.tsx
@@ -30,10 +30,10 @@ import AddIcon from "@mui/icons-material/Add";
import moment from "moment";
import ClearOutlinedIcon from "@mui/icons-material/ClearOutlined";
import { useAppSelector } from "@hooks/reducerHook";
-import DatePicker from "react-datepicker";
// Start Date Picker Component
import { Control } from "react-hook-form";
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
interface StartDatePickerProps {
control: Control<any>;
@@ -48,18 +48,19 @@ const StartDatePicker = ({ control, name }:
StartDatePickerProps) => (
render={({ field: { onChange, value, ref } }) => (
<Stack minWidth={210}>
<InputLabel required={true}>Start Time</InputLabel>
- <DatePicker
- showTimeSelect
+ <CustomDatepicker
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
- selected={value ? moment(value).toDate() : null}
+ selected={
+ value && moment(value).isValid()
+ ? moment(value).toDate()
+ : moment().toDate()
+ }
ref={ref}
- onChange={(date) => {
+ onChange={(date: { toISOString: () => any }) => {
onChange(date ? date.toISOString() : null);
}}
showTimeInput
@@ -84,18 +85,19 @@ const EndDatePicker = ({ control, name }:
EndDatePickerProps) => (
render={({ field: { onChange, value, ref } }) => (
<Stack minWidth={210}>
<InputLabel required={true}>End Time</InputLabel>
- <DatePicker
- showTimeSelect
+ <CustomDatepicker
timeIntervals={1}
timeFormat="hh:mm aa"
timeCaption="Time"
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
- selected={value ? moment(value).toDate() : null}
+ selected={
+ value && moment(value).isValid()
+ ? moment(value).toDate()
+ : moment().toDate()
+ }
ref={ref}
- onChange={(date) => {
+ onChange={(date: { toISOString: () => any }) => {
onChange(date ? date.toISOString() : null);
}}
showTimeInput
diff --git
a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/BMAttributesFields.tsx
b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/BMAttributesFields.tsx
index 99dc5c0fd..ad5852095 100644
---
a/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/BMAttributesFields.tsx
+++
b/dashboard/src/views/DetailPage/EntityDetailTabs/PropertiesTab/BMAttributesFields.tsx
@@ -15,6 +15,7 @@
* limitations under the License.
*/
+import CustomDatepicker from "@components/DatePicker/CustomDatePicker";
import { useAppSelector } from "@hooks/reducerHook";
import {
Select,
@@ -27,7 +28,6 @@ import {
} from "@mui/material";
import { isEmpty } from "@utils/Utils";
import moment from "moment";
-import DatePicker from "react-datepicker";
import { Controller } from "react-hook-form";
import ReactQuill from "react-quill-new";
@@ -79,35 +79,31 @@ const BMAttributesFields = ({ obj, control, index }: any)
=> {
}
return typeName === "date" ? (
- <DatePicker
+ <CustomDatepicker
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
selected={
value && moment(value).isValid()
? moment(value).toDate()
: moment().toDate()
}
- onChange={(date) => {
+ onChange={(date: { getTime: () => any }) => {
onChange(date ? date.getTime() : null);
}}
ref={ref}
dateFormat="MM/dd/yyyy"
/>
) : (
- <DatePicker
+ <CustomDatepicker
showPopperArrow={false}
popperProps={{ strategy: "fixed" }}
- showYearDropdown
- showMonthDropdown
selectsMultiple
selectedDates={
Array.isArray(value)
? value.map((d: string | number | Date) => new Date(d))
: []
}
- onChange={(dates) => {
+ onChange={(dates: any[]) => {
onChange(
Array.isArray(dates)
? dates.map((date) => date.getTime())
