Prevent Day Picker from changing months.

[bilbobag]

Hey guys. At first, thanks for great package, I really enjoyed playing with this for a couple of hours. Unfortunately, I stumbled upon "bug" I cannot resolve by myself. I'm using day-picker to make vertical, scrollable, 24 month long calendar. But as you can see on a GIF, when I click a date later than current month, then the month changes, and the one that got clicked is now first, and there is no way to go back to current month.

I am using component with Custom Overlay. My code looks like this:

const CustomOverlay = ({ classNames, children, ...props }) => {
  const weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

  return (
    <div className={classNames.overlayWrapper} {...props}>
      <div className={classNames.overlay}>
        <section className="weekdays">
          <div className="weekdays__table">
            <ul className="weekdays__row">
              {weekdays.map((day) => (
                <li className="weekdays__day">{day}</li>
              ))}
            </ul>
          </div>
        </section>
        {children}
        <button className="scrollable-datepicker__button btn-red--large">APPLY</button>
      </div>
    </div>
  );
};

const ScrollableDatepicker = () => {
  const modifiers = {
    weekends: { daysOfWeek: [0, 6] },
  };

  const modifiersStyles = {
    weekends: {
      color: '#C84332',
    },
  };

  const month = new Date();
  return (
    <div className="scrollable-datepicker">
      <DayPickerInput
        month={month}
        overlayComponent={CustomOverlay}
        showOverlay={true}
        hideOnDayClick={false}
        placeholder="Heey"
        dayPickerProps={{
          modifiers,
          modifiersStyles,
          numberOfMonths: 24,
          canChangeMonth: false,
          showWeekDays: false,
          month,
        }}
      />
    </div>
  );
};

What i tried:

• initialMont, fromMonth, toMonth props
• onDayChange Event Handler with handle change function where I override state of month and value.

I would really appreciate any help with this. This is a breaking feature for me and if i can't make it working then I'll have to find another package which I don't want because this one is really good to work with.

[brojd]

any update on this?

[bilbobag]

Hey @brojd, thanks for pinging

I don't exactly remember what I did to make it work so I can only give you a little hint and I hope you'll solve it yourself.
Currently, I'm using DatePicker component with my custom input component instead of DatePickerInput, I'm passing a ref to control opening and closing. I'm also having currentlySelectedDay state which I pass as a selectedDays props. Please give it a try and let me know if it works - I might go deeper into the code if it didn't.

[brojd]

Hey @bilbobag , thanks, I've also figured out solution based on using ref, something like:

const onDayChange = useCallback(() => {
    inputRef.current.setState({ month: from });
  }, [from]);

return <DayPickerInput
            dayPickerProps={dayPickerProps}
            hideOnDayClick={false}
            ref={inputRef}
            component={component}
            onDayChange={onDayChange}
          />

[gpbl]

This is the right answer. The next version will make it easier to change the month programmatically:

https://react-day-picker-next.netlify.app/guides/changing-months

[ivanyufen]

hi, im doing some job and wonder how did you make the react-day-picker UI into vertical scrolling instead of horizontal prev-next style? thank you very much

[matbagilcz]

hey,
that was loooong time ago but if i remember correctly it was combination of numberOfMonths: 24 props to show 2 years in advance, canChangeMonth: false which is disableNavigation now to hide the arrows, and the rest is just tweaking it with CSS.

hope it helps but keep in mind that all of this was done with older version of react-day-picker and might be done differently now

[ivanyufen]

appreciate you took a chance to reply. this is really helpful, thanks!

[gpbl]

@ivanyufen that's a good feature request - would you mind to elaborate? We are planning to add animations (see the old #87) but we are not there yet.

[ivanyufen]

@gpbl hi yeah actually i managed to make the calendar vertical, modified some css.. would be nice if it is available right away tho. Currently im struggling to reduce flicker on when initialFocus is set to true, it's like the month jump although only a milisecond