From 0ca75bde1245c49926797a1ddd1c731271d3a702 Mon Sep 17 00:00:00 2001
From: erwanMarmelab <erwan@marmelab.com>
Date: Wed, 20 Nov 2024 19:36:23 +0100
Subject: [PATCH] document `<DateRangeInput>` as a filter

---
 docs/DateRangeInput.md | 42 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 40 insertions(+), 2 deletions(-)

diff --git a/docs/DateRangeInput.md b/docs/DateRangeInput.md
index ca646e1dc9..354ab924cc 100644
--- a/docs/DateRangeInput.md
+++ b/docs/DateRangeInput.md
@@ -56,7 +56,7 @@ export const EventEdit = () => (
 | `sx`          | -        | `SxProps`        | -       | The style to apply to the component.                                                                                                                                                         |
 | `validate`    | -        | `function|Array` | -       | Validation rules for the input. See the [Validation Documentation](./Validation.md#per-input-validation-built-in-field-validators) for details.             |
 
-`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`), 
+`<DateRangeInput>` also accept the same props as [MUI X's `<DateRangePicker>`](https://mui.com/x/api/date-pickers/date-range-picker/), except for the `format` prop (renamed `mask`),
 
 **Tip:** Since `<DateRangeInput>` stores its value as a date array, [react-admin's validators](./Validation.md#per-input-validation-built-in-field-validators) like `minValue` or `maxValue` won't work out of the box.
 
@@ -142,6 +142,44 @@ const EventEdit = () => {
 };
 ```
 
+## Using `<DateRangeInput>` as a Filter
+
+`<DateRangeInput>` can also be used to filter a `<List>`.
+
+However, by default, `<DateRangeInput>` returns `Date` objects with their time set to 00:00:00, which makes the upper bound *exclusive*. Usually, users will expect the upper bound to be *inclusive*.
+
+This can be achieved by providing a `parse` function that sets the time of the upper bound to 23:59:59.
+
+Here is an example:
+
+```tsx
+import { DateRangeInput } from '@react-admin/ra-form-layout/DateRangeInput';
+import { List, Datagrid, NumberField, TextField, DateField } from 'react-admin';
+import { endOfDay } from 'date-fns';
+
+const dateRangeFilterParse = (dates: (Date | null)[]) => {
+    return [dates[0], dates[1] ? endOfDay(dates[1]) : dates[1]];
+};
+
+const eventsFilters = [
+    <DateRangeInput
+        source="date_between"
+        key="date_filter"
+        parse={dateRangeFilterParse}
+    />,
+];
+
+export const EventsList = () => (
+    <List filters={eventsFilters}>
+        <Datagrid>
+            <NumberField source="id" />
+            <TextField source="name" />
+            <DateField source="date" />
+        </Datagrid>
+    </List>
+);
+```
+
 ## Providing your own `LocalizationProvider`
 
 MUI X Pickers need to be wrapped in a [LocalizationProvider](https://mui.com/components/pickers/#localization) to work properly. `<DateRangeInput>` already includes a default `<LocalizationProvider>` using the `date-fns` adapter and the `enUS` locale.
@@ -171,4 +209,4 @@ export const App = () => (
 
 **Note:** React-admin only supports the `date-fns` adapter for now.
 
-**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.
\ No newline at end of file
+**Tip**: React-admin already depends on `date-fns` v3 but your package manager may require you to add it to your dependencies.