Question 263860 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – react-date-picker date not changed when i programmatically try to change date

i have a startDate date picker and based on startDate value i am updating date of endDate date picker but with 3 months increament.

it works fine when i fist select future date. endDate value updated correctly. but then when i select past date in startDate date picker, endDate picker value not update instead it shows red background color around date or sometimes around month. like below image. but when i open date picket correct date shown in endDate picker

e.g first select 31 oct in start date , endDate will update corect, then select 15oct you will see endDate is not updated

enter image description here

this is sandbox to reproduce

this is my simple code

import "./styles.css";
import DatePicker from "react-date-picker";
import dayjs from "dayjs";
import { useState } from "react";

export default function App() {
  const [startDate, setStateDate] = useState("");
  const [endDate, setEndDate] = useState("");

  const handleDate = (e) => {
    const date = e.target.value;
    setStateDate(date);
    const endDate = dayjs(date).add(3, "months").toDate();
    setEndDate(endDate);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div style={{display:"flex"}}>
      startDate
      <input
        type="date"
        onChange={handleDate}
        style={{ marginBottom: "20px", display: "block" }}
      />
      </div>
      <div style={{display:"flex"}}>
        EndDate
      <DatePicker
        format="dd/MM/yyyy"
        // recurrence end date must be after the event start date
        minDate={dayjs(startDate).add(1, "day").toDate()}
        maxDate={dayjs(startDate).add(3, "months").toDate()}
        value={endDate}
        onChange={(e) => {
          setEndDate(e);
        }}
      />
      </div>
    </div>
  );
}
Tags:

2

Answers


  1. 0

    You can modify your handleDate function to check if the new endDate falls within the valid range and adjust it if necessary.

    const handleDate = (e) => {
  const date = e.target.value;
  setStateDate(date);
  const newEndDate = dayjs(date).add(3, "months").toDate();
  const validEndDate = dayjs(date).isBefore(newEndDate)
    ? newEndDate
    : dayjs(date).add(1, "day").toDate(); // Adjust endDate if it's not within the valid range
  setEndDate(validEndDate);
};
    Login or Signup to reply.
  2. 0

    You just need to remove the minDate & maxDate limit.

          <DatePicker
        format="dd/MM/yyyy"
        value={endDate}
        onChange={(e) => {
          setEndDate(e);
        }}
      />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search