HTML input date All In One

HTML input date All In One

input type="date"

value === default value

You can set a default value for the input with a date inside the value attribute, like so:

<input type="date" value="2023-01-01" />

<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start" value="2023-10-01" min="2023-01-01" max="2023-12-31" />

Start date:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#value

error

react.js input=date defaultValue not updating bug ❌

input=date 无法设置 defaultValue ❌

  return (
    <div className="App">
        <input
          key={new Date().toDateString()}
          defaultValue={new Date().toDateString()}
          type="date"
          onChange={handleDate}
        />
        <hr />
        <DatePicker
          format="dd/MM/yyyy"
          minDate={minDate}
          maxDate={maxDate}
          value={date}
        />
    </div>
  );

  return (
    <div className="App">
        <input
          key={new Date().toDateString()}
          value={new Date().toDateString()}
          type="date"
          onChange={handleDate}
        />
        {/* <input
          key={new Date().toDateString()}
          defaultValue={new Date().toDateString()}
          type="date"
          onChange={handleDate}
        /> */}
        <hr />
        <DatePicker
          format="dd/MM/yyyy"
          minDate={minDate}
          maxDate={maxDate}
          value={date}
        />
    </div>
  );

solution

still bug ???

  return (
    <div className="App">
        <input
          key={new Date(date).toDateString()}
          value={new Date(date).toDateString()}
          type="date"
          onChange={handleDate}
        />
        {/* <input
          key={new Date().toDateString()}
          defaultValue={new Date().toDateString()}
          type="date"
          onChange={handleDate}
        /> */}
        <hr />
        <DatePicker
          format="dd/MM/yyyy"
          minDate={minDate}
          maxDate={maxDate}
          value={date}
        />
    </div>
  );

demos

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

export default function App() {
  const today = new Date();
  const [date, setDate] = useState(today);
  const [minDate, setMinDate] = useState(dayjs(today).add(1, "day").toDate());
  // const [minDate, setMinDate] = useState(dayjs(today).add(-1, "day").toDate());
  // const [minDate, setMinDate] = useState(dayjs(today).add(0, "day").toDate());
  const [maxDate, setMaxDate] = useState(dayjs(today).add(3, "months").toDate());

  const handleDate = (e) => {
    const date = e.target.value;
    console.log(`\n`);
    console.log(`✅ date`, date);
    const min = dayjs(date).add(1, "day").toDate();
    // const min = dayjs(date).add(-1, "day").toDate();
    // const min = dayjs(date).add(0, "day").toDate();
    console.log(`✅ min `, min);
    setMinDate(min);
    setDate(min);
    const max = dayjs(date).add(3, "months").toDate();
    console.log(`✅ max `, max);
    setMaxDate(max);
  };


  return (
    <div className="App">
        <input
          key={new Date(date).toDateString()}
          value={new Date(date).toDateString()}
          type="date"
          onChange={handleDate}
        />
        {/* <input
          key={new Date().toDateString()}
          defaultValue={new Date().toDateString()}
          type="date"
          onChange={handleDate}
        /> */}
        <hr />
        <DatePicker
          format="dd/MM/yyyy"
          minDate={minDate}
          maxDate={maxDate}
          value={date}
        />
    </div>
  );
}

https://codesandbox.io/s/great-benz-w373n8?file=/src/App.js

refs

https://stackoverflow.com/questions/77281184/react-date-picker-date-not-changed-when-i-programmatically-try-to-change-date/77281906#77281906

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---