how to set start date and end date by default in date input

Question

I need to set start and end date by default mean start date form 1-04-2021 and end date is current date need to set in default right know what happen user can select date by him self by i need to set it default after that user can change according his preference. user are able to change it by select date calendar

const setDate = (e) => {
  const name = e.target.name;
  const value = e.target.value;
  setdate((prev_state) => ({
    ...prev_state,
    [name]: value,
  }));
};

const [FDate, setdate] = useState({ start: "", end: "" });

body = {
  Start_Date: FDate.start,
  End_Date: FDate.end,
};

    <Col lg={2}>
      <label for="start">
        <header>Start Date</header>
      </label>
      <input
        value={FDate.start}
        id="start"
        name="start"
        type="date"
        //  disabled={!dateSel}
        className="inputFields1"
        onChange={(e) => setDate(e)}
        required
      />
    </Col>

    <Col lg={2}>
      <label for="end">
        <header>End Date</header>
      </label>
      <input
        id="end"
        name="end"
        type="date"
        min={FDate.start}
        //  disabled={!dateSel}
        className="inputFields1"
        value={FDate.end}
        onChange={(e) => setDate(e)}
        required
      />
    </Col>

Your example does not contain enough code for me to run it on my computer. See [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) What component library are you using? Add the appropriate tag. — Janez Kuhar, Apr 17 '21 at 14:03

Lakshman Kambam · Accepted Answer · 2021-04-17T15:34:38.520

just assign default start & end date values instead empty strings in initialState.

const [defaultDates, setDates] = useState({
    startDate: "2021-01-04",
    endDate: new Date().toISOString().substr(0, 10)
});

getDefaultDateValues

const getDefaultDates = () => {
  const date = new Date();
  const year = date.getFullYear();
  let month = date.getMonth() + 1;
  let firstDateOfMonth = new Date(year, month, 1).getDate();

  firstDateOfMonth =
    firstDateOfMonth < 10 ? "0" + firstDateOfMonth : firstDateOfMonth;
  month = month < 10 ? "0" + month : month;

  const startDate = `${year}-${month}-${firstDateOfMonth}`;
  const endDate = date.toISOString().substr(0, 10);

  return {
    startDate,
    endDate
  };
};

CodeSandBox - https://codesandbox.io/s/twilight-brook-9hgs4?file=/src/App.js

const App = () => {
  const getDefaultDateValues = getDefaultDates();

  const [defaultDates, setDates] = useState(getDefaultDateValues);

  const setDateValues = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setDates((prev_state) => ({
      ...prev_state,
      [name]: value
    }));
  };

  return (
    <div>
      <p>
        <label for="start">
          <header>Start Date:- First day/date of the current month</header>
        </label>
        <input
          value={defaultDates.startDate}
          id="startDate"
          name="startDate"
          type="date"
          //  disabled={!dateSel}
          className="inputFields1"
          onChange={(e) => setDateValues(e)}
          required
        />
      </p>
      <p>
        <label for="end">
          <header>End Date:- current day/date of the current month</header>
        </label>
        <input
          id="endDate"
          name="endDate"
          type="date"
          min={defaultDates.startDate}
          //  disabled={!dateSel}
          className="inputFields1"
          value={defaultDates.endDate}
          onChange={(e) => setDateValues(e)}
          required
        />
      </p>
    </div>
  );
};

export default App;

if i want to change start date to month first date how can i set it — , Apr 17 '21 at 14:30
The displayed date format will differ from the actual value — the displayed date is formatted based on the locale of the user's browser, but the parsed value is always formatted yyyy-mm-dd - https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format#9519493 — Lakshman Kambam, Apr 17 '21 at 14:39
@HimanshuRathi https://stackoverflow.com/questions/50545478/input-date-format-with-dd-mm-yyyy-in-the-input-field#50546225 — Lakshman Kambam, Apr 17 '21 at 14:41
no i don't want to change format is ok what i am saying month starting date mean 01-04-2021 mean in startDate: "2021-01-04" need to set every month first date — , Apr 17 '21 at 15:01
@HimanshuRathi updated codesandbox. check it and let me know - https://codesandbox.io/s/twilight-brook-9hgs4?file=/src/App.js — Lakshman Kambam, Apr 17 '21 at 15:26
How do I get month starting date dynamically without selecting? — thinkerBOB, Jan 02 '23 at 12:07

how to set start date and end date by default in date input

1 Answers1