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 e49aa2cda..741b448ab 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 @@ -3,9 +3,12 @@ import { v4 } from 'uuid'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker'; +import { useState } from 'react'; import { isDefined } from '~/utils/isDefined'; export const ObjectFilterDropdownDateInput = () => { + const [internalDate, setInternalDate] = useState(new Date()); + const { filterDefinitionUsedInDropdownState, selectedOperandInDropdownState, @@ -24,8 +27,9 @@ export const ObjectFilterDropdownDateInput = () => { const selectedFilter = useRecoilValue(selectedFilterState); const handleChange = (date: Date | null) => { - if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return; + setInternalDate(date); + if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return; selectFilter?.({ id: selectedFilter?.id ? selectedFilter.id : v4(), fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId, @@ -40,7 +44,7 @@ export const ObjectFilterDropdownDateInput = () => { return ( diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx index 89f13fef9..95a1164cf 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx @@ -1,6 +1,6 @@ -import ReactDatePicker from 'react-datepicker'; import styled from '@emotion/styled'; import { DateTime } from 'luxon'; +import ReactDatePicker from 'react-datepicker'; import { Key } from 'ts-key-enum'; import { IconCalendarX, @@ -298,7 +298,7 @@ const StyledCustomDatePickerHeader = styled.div` `; export type InternalDatePickerProps = { - date: Date; + date: Date | null; onMouseSelect?: (date: Date | null) => void; onChange?: (date: Date | null) => void; clearable?: boolean; @@ -372,30 +372,29 @@ export const InternalDatePicker = ({ }; const handleChangeMonth = (month: number) => { - const newDate = new Date(date); + const newDate = new Date(internalDate); newDate.setMonth(month); onChange?.(newDate); }; const handleChangeYear = (year: number) => { - const newDate = new Date(date); + const newDate = new Date(internalDate); newDate.setFullYear(year); onChange?.(newDate); }; - const dateWithoutTime = DateTime.fromJSDate(date) + const dateWithoutTime = DateTime.fromJSDate(internalDate) .toLocal() .set({ - day: date.getUTCDate(), - month: date.getUTCMonth() + 1, - year: date.getUTCFullYear(), + day: internalDate.getUTCDate(), + month: internalDate.getUTCMonth() + 1, + year: internalDate.getUTCFullYear(), hour: 0, minute: 0, second: 0, millisecond: 0, }) .toJSDate(); - const dateToUse = isDateTimeInput ? date : dateWithoutTime; return ( @@ -404,9 +403,11 @@ export const InternalDatePicker = ({ { + newDate?.setHours(internalDate.getUTCHours()); + newDate?.setUTCMinutes(internalDate.getUTCMinutes()); onChange?.(newDate); }} customInput={ @@ -440,13 +441,13 @@ export const InternalDatePicker = ({ options={months} disableBlur onChange={handleChangeMonth} - value={date.getUTCMonth()} + value={internalDate.getUTCMonth()} fullWidth />