From eadd13c8cf13c3a273c6a5e03d89c5c901f91904 Mon Sep 17 00:00:00 2001
From: Sven van de Scheur <svenvandescheur@gmail.com>
Date: Thu, 10 Oct 2024 10:46:43 +0200
Subject: [PATCH] :sparkles: - feat: intergrate DateRangeInput with DataGrid

---
 src/components/data/datagrid/datagridthead.tsx        | 7 ++++++-
 src/components/form/daterangeinput/daterangeinput.tsx | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/data/datagrid/datagridthead.tsx b/src/components/data/datagrid/datagridthead.tsx
index 8e1e614..8be9002 100644
--- a/src/components/data/datagrid/datagridthead.tsx
+++ b/src/components/data/datagrid/datagridthead.tsx
@@ -163,7 +163,12 @@ export const DataGridTHead: React.FC = () => {
                 {field.filterable !== false && (
                   <FormControl
                     aria-label={_labelFilterField}
-                    icon={!field.options && <Outline.MagnifyingGlassIcon />}
+                    icon={
+                      !field.options &&
+                      !field.type.includes("date") && (
+                        <Outline.MagnifyingGlassIcon />
+                      )
+                    }
                     form={`${dataGridId}-filter-form`}
                     name={field.filterLookup || field.name}
                     options={field.options}
diff --git a/src/components/form/daterangeinput/daterangeinput.tsx b/src/components/form/daterangeinput/daterangeinput.tsx
index 010b8a1..a34f829 100644
--- a/src/components/form/daterangeinput/daterangeinput.tsx
+++ b/src/components/form/daterangeinput/daterangeinput.tsx
@@ -8,6 +8,9 @@ import "./daterangeinput.scss";
 import { TRANSLATIONS } from "./daterangeinput.translations";
 
 export type DateRangeInputProps = Omit<DateInputProps, "type" | "value"> & {
+  /** Component to use as icon. */
+  icon?: React.ReactNode;
+
   /** Whether a date or date range should be provided. */
   type?: "daterange";
 
@@ -26,6 +29,7 @@ export type DateRangeInputProps = Omit<DateInputProps, "type" | "value"> & {
  */
 export const DateRangeInput: React.FC<DateRangeInputProps> = ({
   form,
+  icon = <Outline.CodeBracketSquareIcon />,
   labelStartDate,
   labelEndDate,
   name,
@@ -204,7 +208,7 @@ export const DateRangeInput: React.FC<DateRangeInputProps> = ({
         value={valuesState?.[0]}
         onChange={handleStartChange}
       />
-      <Outline.CodeBracketSquareIcon />{" "}
+      {icon}
       <DateInput
         {...props}
         label={