Month range picker

[nandita1]

I wanted to implement a month range picker. Is it possible with react-day-picker?

[dimitur2204]

@nandita1

You can use the mode="range" https://react-day-picker.js.org/basics/selecting-days#selecting-a-range-of-days and listen to the onMonthChange event on the picker and then set the value of your picker to the month that has been changed to.

[gpbl]

@nandita1 here an example of a DayPicker selecting the whole month. Not the best UX, DayPicker maybe not the best component for you:

https://codesandbox.io/s/react-day-picker-select-month-gzztg1

import React, { useState } from "react";

import { isSameMonth } from "date-fns";
import { DayClickEventHandler, DayPicker } from "react-day-picker";

export default function App() {
  const [selectedMonths, setSelectedMonths] = useState<Date[]>([]);

  const handleDayClick: DayClickEventHandler = (day, modifiers) => {
    const newSelectedMonths = [...selectedMonths];
    if (modifiers.selected) {
      const index = selectedMonths.findIndex((selectedMonth) =>
        isSameMonth(day, selectedMonth)
      );
      newSelectedMonths.splice(index, 1);
    } else {
      newSelectedMonths.push(day);
    }
    setSelectedMonths(newSelectedMonths);
  };

  const handleResetClick = () => setSelectedMonths([]);

  let footer = <p>Please pick a day.</p>;

  if (selectedMonths.length > 0)
    footer = (
      <p>
        You selected {selectedMonths.length} months.{" "}
        <button onClick={handleResetClick}>Reset</button>
      </p>
    );

  return (
    <DayPicker
      onDayClick={handleDayClick}
      selected={(day) =>
        selectedMonths.some((selectedMonth) => isSameMonth(selectedMonth, day))
      }
      footer={footer}
    />
  );
}

[imtheaman]

@gpbl ain't there a better way, why're we showing dates when the user has to select a month only? we can show list of months in grid view, so user can select one of 'em.
I gotta do it but i didn' find anything such in the docs

[benjamin-guibert]

It would be a great feature to have a month picker, with multiple/range modes as well. 👍🏻