[pickers] Allow to render the months before currentMonth instead of t…

…he one after
mui · Apr 12, 2023 · 06145ab · 06145ab
1 parent adc6db1
commit 06145ab
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 20 deletions.
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.js b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
+
+export default function DateRangeCalendarCalendarDirectionProp() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangeCalendar']}>
+        <DateRangeCalendar calendarDirection="backward" disableFuture />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.tsx b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers-pro';
+import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
+import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
+
+export default function DateRangeCalendarCalendarDirectionProp() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DateRangeCalendar']}>
+        <DateRangeCalendar calendarDirection="backward" disableFuture />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/.../data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.tsx.preview b/.../data/date-pickers/date-range-calendar/DateRangeCalendarCalendarDirectionProp.tsx.preview
@@ -0,0 +1 @@
+<DateRangeCalendar calendarDirection="backward" disableFuture />
diff --git a/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarProp.tsx.preview b/docs/data/date-pickers/date-range-calendar/DateRangeCalendarCalendarProp.tsx.preview
diff --git a/...calendar/DateRangeCalendarCalendarProp.js → ...alendar/DateRangeCalendarCalendarsProp.js b/...calendar/DateRangeCalendarCalendarProp.js → ...alendar/DateRangeCalendarCalendarsProp.js
@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
 import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
 
-export default function DateRangeCalendarCalendarProp() {
+export default function DateRangeCalendarCalendarsProp() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>

diff --git a/...alendar/DateRangeCalendarCalendarProp.tsx → ...lendar/DateRangeCalendarCalendarsProp.tsx b/...alendar/DateRangeCalendarCalendarProp.tsx → ...lendar/DateRangeCalendarCalendarsProp.tsx
@@ -4,7 +4,7 @@ import { LocalizationProvider } from '@mui/x-date-pickers-pro';
 import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';
 import { DateRangeCalendar } from '@mui/x-date-pickers-pro/DateRangeCalendar';
 
-export default function DateRangeCalendarCalendarProp() {
+export default function DateRangeCalendarCalendarsProp() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <DemoContainer components={['DateRangeCalendar', 'DateRangeCalendar']}>

diff --git a/docs/data/date-pickers/date-range-calendar/date-range-calendar.md b/docs/data/date-pickers/date-range-calendar/date-range-calendar.md
@@ -28,11 +28,16 @@ The component can be disabled or read-only.
 
 ## Customization
 
-### Render 1 to 3 months
+### Choose the rendered months
 
 You can render up to 3 months at the same time using the `calendars` prop:
 
-{{"demo": "DateRangeCalendarCalendarProp.js"}}
+{{"demo": "DateRangeCalendarCalendarsProp.js"}}
+
+You can render the month in the backward direction using the `calendarDirection` prop.
+This can be useful when using `disableFuture` to render the current month and the month before instead of the current month and the month after.
+
+{{"demo": "DateRangeCalendarCalendarDirectionProp.js"}}
 
 ### Custom day rendering
 

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx
@@ -178,6 +178,7 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
     defaultRangePosition: inDefaultRangePosition,
     onRangePositionChange: inOnRangePositionChange,
     calendars,
+    calendarDirection = 'onward',
     components,
     componentsProps,
     slots: innerSlots,
@@ -463,16 +464,14 @@ const DateRangeCalendar = React.forwardRef(function DateRangeCalendar<TDate>(
     [calendars],
   );
 
-  const visibleMonths = React.useMemo(
-    () =>
-      Array.from({ length: calendars }).map((_, index) =>
-        utils.setMonth(
-          calendarState.currentMonth,
-          utils.getMonth(calendarState.currentMonth) + index,
-        ),
-      ),
-    [utils, calendarState.currentMonth, calendars],
-  );
+  const visibleMonths = React.useMemo(() => {
+    const firstMonth =
+      calendarDirection === 'onward'
+        ? calendarState.currentMonth
+        : utils.addMonths(calendarState.currentMonth, 1 - calendars);
+
+    return Array.from({ length: calendars }).map((_, index) => utils.addMonths(firstMonth, index));
+  }, [utils, calendarState.currentMonth, calendars, calendarDirection]);
 
   const focusedMonth = React.useMemo(() => {
     if (!autoFocus) {
@@ -580,6 +579,10 @@ DateRangeCalendar.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * @default 'onward'
+   */
+  calendarDirection: PropTypes.oneOf(['backward', 'onward']),
   /**
    * The number of calendars to render.
    * @default 2

diff --git a/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts b/packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.types.ts
@@ -88,6 +88,10 @@ export interface ExportedDateRangeCalendarProps<TDate>
    * @default 2
    */
   calendars?: 1 | 2 | 3;
+  /**
+   * @default 'onward'
+   */
+  calendarDirection?: 'onward' | 'backward';
   /**
    * If `true`, editing dates by dragging is disabled.
    * @default false

diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx b/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx
@@ -40,6 +40,10 @@ DateRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * @default 'onward'
+   */
+  calendarDirection: PropTypes.oneOf(['backward', 'onward']),
   /**
    * The number of calendars to render on **desktop**.
    * @default 2

diff --git a/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx b/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx
@@ -75,6 +75,10 @@ DesktopDateRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * @default 'onward'
+   */
+  calendarDirection: PropTypes.oneOf(['backward', 'onward']),
   /**
    * The number of calendars to render on **desktop**.
    * @default 2

diff --git a/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx b/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx
@@ -75,6 +75,10 @@ MobileDateRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * @default 'onward'
+   */
+  calendarDirection: PropTypes.oneOf(['backward', 'onward']),
   /**
    * The number of calendars to render on **desktop**.
    * @default 2

diff --git a/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx b/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx
@@ -68,6 +68,10 @@ StaticDateRangePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
+  /**
+   * @default 'onward'
+   */
+  calendarDirection: PropTypes.oneOf(['backward', 'onward']),
   /**
    * The number of calendars to render.
    * @default 2

diff --git a/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx b/packages/x-date-pickers-pro/src/dateRangeViewRenderers/dateRangeViewRenderers.tsx
@@ -31,6 +31,7 @@ export const renderDateRangeViewCalendar = <TDate extends unknown>({
   defaultRangePosition,
   onRangePositionChange,
   calendars,
+  calendarDirection,
   components,
   componentsProps,
   slots,
@@ -67,6 +68,7 @@ export const renderDateRangeViewCalendar = <TDate extends unknown>({
     defaultRangePosition={defaultRangePosition}
     onRangePositionChange={onRangePositionChange}
     calendars={calendars}
+    calendarDirection={calendarDirection}
     components={components}
     componentsProps={componentsProps}
     slots={slots}