How to display a calendar instead of textinput to have the date with REACT?

Question

how can I do to have a calendar instead of having a textinput in my form please ??

export default function InterviewSettings() {
  const [date, setDate] = useState("");
  const [msg, setMsg] = useState("");    
  ...    
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>
          Date:
          <input
            type="text"
            value={date}
            placeholder="DD/MM/YY"
            onChange={(e) => setDate(e.target.value)}
          />
        </label>
      </form>
    </>
  );
}

Answer 1

您可以简单地将输入类型从type="text"更改为 HTML5 日期类型type="date" ，这应该可以解决问题。

Answer 2

Tou can use input type="date"

<input type="date" id="start" name="trip-start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

or you can consider 3-rd party libraries for that:

• https://www.npmjs.com/package/react-datepicker
• https://www.npmjs.com/package/react-calendar
• https://www.npmjs.com/package/react-dates