CODEWITHSUNDEEP
reactjsmaterial-uidatepickermui-x
Shai Mahnai
Shai Mahnai

Reputation: 11

React date picker range based on MUI-x Datepicker

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

Upvotes: 1

Views: 1533

Answers (1)

incheol seung
incheol seung

Reputation: 21

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

enter image description here

'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}
      />
    </>
  );
}

Upvotes: 0

Related Questions