docs: not updating selected month during input change event

[lrgurjar]

Description

Fork this CodeSandbox: https://codesandbox.io/p/sandbox/react-day-picker-v8-eg8mw and add to it the code to reproduce the issue. https://codesandbox.io/p/sandbox/frosty-mountain-p44j9f?file=%2Fsrc%2FApp.tsx%3A6%2C12

https://codesandbox.io/p/sandbox/dreamy-chandrasekhar-7d4hcd?file=%2Fsrc%2FApp.tsx%3A8%2C25

Expected Behavior

I want current select month displayed on date picker if user change month form input box Describe what you expect to happen.

Actual Behavior

Describe what is actually happening. I am using 8.10.1 react day picker version when I am changing date from input box date Picker is not displaying current selected month.

Steps to Reproduce

1. Select the any date form date picker
2. try to edit date form input box except default selected
3. try to change month form input box then it is not showing current selected month
4. in screenshot input box i have selected 04/10/2024 but date picker is showing may 2024 and footer selected message is correct wed April 10 2024

Possible Solution

If you have a suggestion on how to fix the issue, please include it here.

Screenshots

If applicable, add screenshots or GIFs to help explain your problem.

Your Environment

• React version:18.2
• Your Timezone:9-7 IST
• Browser [e.g. chrome, safari]:Chrome
• Version [e.g. 22]:8.10.1
• Operating System [e.g. iOS, Windows]:windows
• Other relevant information:

[lrgurjar]

import React from "react";
import { useState } from "react";

import { format, isValid, parse } from "date-fns";
import { DayPicker } from "react-day-picker";
import "react-day-picker/dist/style.css";

export default function App() {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
  const [inputValue, setInputValue] = useState("");

  const handleSelect = (date: Date | undefined) => {
    if (!date) {
      setInputValue("");
      setSelectedDate(undefined);
    } else {
      setSelectedDate(date);
      setInputValue(format(date, "MM/dd/yyyy"));
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const parsedDate = parse(e.target.value, "MM/dd/yyyy", new Date());
    if (isValid(parsedDate)) {
      setSelectedDate(parsedDate);
    }
    setInputValue(e.target.value);
  };
  return (
    <div>
      <label htmlFor="booking-input">
        <strong>Selected Date: </strong>
      </label>
      <input
        style={{ fontSize: "inherit" }}
        id="booking-input"
        type="text"
        value={inputValue}
        placeholder="MM/dd/yyyy"
        onChange={handleInputChange}
      />
      <DayPicker
        mode="single"
        selected={selectedDate}
        onSelect={handleSelect}
        footer={
          <p aria-live="assertive" aria-atomic="true">
            {selectedDate !== undefined && (
              <>Selected: {selectedDate.toDateString()}</>
            )}
          </p>
        }
      />
    </div>
  );
}

[sbc640964]

+1

[sbc640964]

+1 = I join too! :)

I also agree with your problem, I encounter the same bug that needs urgent attention...

It always shows the current month without any reference to the selected date.

[gpbl]

Thanks for the heads up - I find the examples: https://react-day-picker.js.org/advanced-guides/input-fields#input-with-inline-calendar

[lrgurjar]

Thanks for the heads up - I find the examples: https://react-day-picker.js.org/advanced-guides/input-fields#input-with-inline-calendar

@gpbl thank you so much your response. would it work same for multiple & range also ?

[gpbl]

Thanks for the heads up - I find the examples: react-day-picker.js.org/advanced-guides/input-fields#input-with-inline-calendar

@gpbl thank you so much your response. would it work same for multiple & range also ?

Sure you can make it working with a range selection by providing two input fields. Maybe multiple input fields as well but then you need n input fields, each for a selectable day.

[lrgurjar]

Thanks for the heads up - I find the examples: react-day-picker.js.org/advanced-guides/input-fields#input-with-inline-calendar

@gpbl thank you so much your response. would it work same for multiple & range also ?

Sure you can make it working with a range selection by providing two input fields. Maybe multiple input fields as well but then you need n input fields, each for a selectable day.

ok thank you so much @gpbl