React date picker range based on MUI-x Datepicker

Question

I'm looking to build my custom date picker range component, based on two date picker component of @mui/x-date-pickers. I don't want to use this MUI-x-prop DatepickerRange, cause it cose money. I need the two calendar to be followed each other by one month (alwyes display adjacent months).

Is it posible to control the displayed month from outside of the datepicker component? Anyone did somthing like this?

I can't control the month navigations outside of the component state

Answer 1

I don't know if this is what you want, but this can be helpful.

'use client';

import {
  getFirstDayOfMonth,
  getLastDayOfMonth,
  TuiDatePicker,
} from 'nextjs-tui-date-picker';
import { useState } from 'react';

export default function Page() {
  const [firstDate, setFirstDate] = useState(new Date());
  const [secondDate, setSecondDate] = useState(new Date());

  const handleFirstDateChange = (value: string) => {
    setFirstDate(new Date(value));
    setSecondDate(new Date(getLastDayOfMonth(value)));
  };

  const handleSecondDateChange = (value: string) => {
    setFirstDate(new Date(getFirstDayOfMonth(value)));
    setSecondDate(new Date(value));
  };

  return (
    <>
      <TuiDatePicker
        handleChange={handleFirstDateChange}
        date={firstDate}
        inputWidth={140}
        fontSize={16}
      />
      <TuiDatePicker
        handleChange={handleSecondDateChange}
        date={secondDate}
        inputWidth={140}
        fontSize={16}
      />
    </>
  );
}