Merge pull request #1695 from visualize-admin/fix/manually-entering-date

fix: Manually entering dates
visualize-admin · Aug 27, 2024 · 115d54b · 115d54b
2 parents 3364bb0 + 88e6ae2
commit 115d54b
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ You can also check the
   - Drag handles are now centered in table configurator
   - Single chart titles are now correctly displayed in user profile
   - Renaming of charts through user profile now works correctly
+  - Manually entering dates in date pickers works correctly again
 
 # [4.7.4] - 2024-07-23
 

diff --git a/app/charts/shared/chart-data-filters.tsx b/app/charts/shared/chart-data-filters.tsx
@@ -529,6 +529,7 @@ export const DataFilterTemporalDimension = ({
       minDate={minDate}
       maxDate={maxDate}
       disabled={disabled}
+      parseDate={parseDate}
     />
   ) : (
     <DataFilterGenericDimension

diff --git a/app/configurator/components/field-date-picker.tsx b/app/configurator/components/field-date-picker.tsx
@@ -19,6 +19,7 @@ export type DatePickerFieldProps = {
   sideControls?: React.ReactNode;
   timeUnit?: DatePickerTimeUnit;
   dateFormat?: (d: Date) => string;
+  parseDate: (s: string) => Date | null;
 } & Omit<
   DatePickerProps<Date>,
   "value" | "onChange" | "shouldDisableDate" | "inputFormat" | "renderInput"
@@ -36,6 +37,7 @@ export const DatePickerField = (props: DatePickerFieldProps) => {
     sideControls,
     timeUnit = TimeUnit.Day,
     dateFormat = timeFormat("%Y-%m-%d"),
+    parseDate,
     ...rest
   } = props;
   const handleChange = useCallback(
@@ -106,6 +108,9 @@ export const DatePickerField = (props: DatePickerFieldProps) => {
                 hiddenLabel
                 size="small"
                 {...params}
+                onChange={(e) => {
+                  handleChange(parseDate(e.target.value));
+                }}
                 sx={{
                   ...params.sx,
 

diff --git a/app/configurator/components/field.tsx b/app/configurator/components/field.tsx
@@ -434,6 +434,7 @@ export const DataFilterTemporal = ({
         disabled={disabled || usesMostRecentDate}
         topControls={topControls}
         sideControls={sideControls}
+        parseDate={parseDate}
       />
       <MostRecentDateSwitch
         checked={usesMostRecentDate}

diff --git a/app/configurator/components/filters.tsx b/app/configurator/components/filters.tsx
@@ -1030,6 +1030,7 @@ export const TimeFilter = (props: TimeFilterProps) => {
                     dateFormat={formatDateValue}
                     minDate={from}
                     maxDate={to}
+                    parseDate={parse}
                   />
                 }
                 right={
@@ -1049,6 +1050,7 @@ export const TimeFilter = (props: TimeFilterProps) => {
                     dateFormat={formatDateValue}
                     minDate={from}
                     maxDate={to}
+                    parseDate={parse}
                   />
                 }
               />

diff --git a/app/configurator/components/layout-configurator.tsx b/app/configurator/components/layout-configurator.tsx
@@ -561,6 +561,7 @@ const DashboardTimeRangeFilterOptions = ({
             minDate={minDate}
             maxDate={maxDate}
             label={t({ id: "controls.filters.select.from", message: "From" })}
+            parseDate={parseDate}
           />
         ) : (
           <Select
@@ -582,6 +583,7 @@ const DashboardTimeRangeFilterOptions = ({
             minDate={minDate}
             maxDate={maxDate}
             label={t({ id: "controls.filters.select.to", message: "To" })}
+            parseDate={parseDate}
           />
         ) : (
           <Select