diff --git a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
index 73db3ee004..1708fa1c62 100644
--- a/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownFilterInput.tsx
@@ -49,8 +49,12 @@ export const AdvancedFilterDropdownFilterInput = ({
))}
{filterType === 'RATING' && }
- {filterType === 'DATE_TIME' && }
- {filterType === 'DATE' && }
+ {filterType === 'DATE_TIME' && (
+
+ )}
+ {filterType === 'DATE' && (
+
+ )}
{filterType === 'RELATION' && (
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
index c7ba9dd460..0113cc10e1 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
@@ -24,7 +24,13 @@ import {
import { dateLocaleState } from '~/localization/states/dateLocaleState';
import { formatDateString } from '~/utils/string/formatDateString';
-export const ObjectFilterDropdownDateInput = () => {
+type ObjectFilterDropdownDateInputProps = {
+ instanceId: string;
+};
+
+export const ObjectFilterDropdownDateInput = ({
+ instanceId,
+}: ObjectFilterDropdownDateInputProps) => {
const { dateFormat, timeZone } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -109,6 +115,7 @@ export const ObjectFilterDropdownDateInput = () => {
return (
{
+type ObjectFilterDropdownDateTimeInputProps = {
+ instanceId: string;
+};
+
+export const ObjectFilterDropdownDateTimeInput = ({
+ instanceId,
+}: ObjectFilterDropdownDateTimeInputProps) => {
const { dateFormat, timeFormat, timeZone } = useContext(UserContext);
const dateLocale = useRecoilValue(dateLocaleState);
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
@@ -112,6 +118,7 @@ export const ObjectFilterDropdownDateTimeInput = () => {
return (
-
+
>
);
} else if (filterType === 'DATE_TIME') {
@@ -90,7 +90,7 @@ export const ObjectFilterDropdownFilterInput = ({
<>
-
+
>
);
} else {
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
index 9e7442e106..9cf94462e3 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts
@@ -13,13 +13,9 @@ import { useUserTimezone } from '@/ui/input/components/internal/date/hooks/useUs
import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
import { stringifyRelativeDateFilter } from '@/views/view-filter-value/utils/stringifyRelativeDateFilter';
+import { DEFAULT_RELATIVE_DATE_FILTER_VALUE } from 'twenty-shared/constants';
-import {
- isDefined,
- type RelativeDateFilter,
- type RelativeDateFilterDirection,
- type RelativeDateFilterUnit,
-} from 'twenty-shared/utils';
+import { isDefined, type RelativeDateFilter } from 'twenty-shared/utils';
export const useApplyObjectFilterDropdownOperand = () => {
const objectFilterDropdownCurrentRecordFilter = useRecoilComponentValue(
@@ -108,9 +104,7 @@ export const useApplyObjectFilterDropdownOperand = () => {
recordFilterToUpsert.displayValue = displayValue;
} else if (newOperand === RecordFilterOperand.IS_RELATIVE) {
const defaultRelativeDate: RelativeDateFilter = {
- direction: 'THIS' as RelativeDateFilterDirection,
- amount: 1,
- unit: 'DAY' as RelativeDateFilterUnit,
+ ...DEFAULT_RELATIVE_DATE_FILTER_VALUE,
timezone: userTimezone,
};
diff --git a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
index f088073850..83052bcdac 100644
--- a/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
@@ -121,6 +121,7 @@ export const RecordCalendarTopBar = () => {
dropdownComponents={
{
+ const instanceId = useId();
+
const value =
isString(defaultValue) && isNonEmptyString(defaultValue)
? safeParseRelativeDateFilterJSONStringified(defaultValue)
@@ -32,6 +35,7 @@ export const FormRelativeDatePicker = ({
return (
;
@@ -333,6 +334,7 @@ const ReactDatePicker = lazy>(() =>
);
export const DatePicker = ({
+ instanceId,
date,
onChange,
onClose,
@@ -476,6 +478,7 @@ export const DatePicker = ({
}) =>
isRelative ? (
>(() =>
);
export const DateTimePicker = ({
+ instanceId,
date,
onChange,
onClose,
@@ -484,6 +486,7 @@ export const DateTimePicker = ({
}) =>
isRelative ? (
`
`;
type RelativeDatePickerHeaderProps = {
+ instanceId: string;
direction: RelativeDateFilterDirection;
amount?: Nullable;
unit: RelativeDateFilterUnit;
@@ -31,6 +32,7 @@ type RelativeDatePickerHeaderProps = {
};
export const RelativeDatePickerHeader = ({
+ instanceId,
direction,
unit,
amount,
@@ -53,7 +55,7 @@ export const RelativeDatePickerHeader = ({
return (