Date picker

This component allows for the user to select a date. For example, the user could select a date of birth, or a date of an appointment. The date picker is a text input that opens a calendar when clicked. The user can then select a date that they are looking for flight tickets.

1const DatePicker = ({ submitted, onSubmit }) => {
2  const [datepicker, setDatepicker] = useState(null);
3
4  useEffect(() => {
5    const elem = document.getElementById("datepicker");
6    const datepicker = new window.Datepicker(elem, {
7      weekStart: 1, // Monday
8    });
9    datepicker.setDate(new Date());
10    setDatepicker(datepicker);
11  }, []);
12
13  return html`
14    <form
15      className="chat-datepicker"
16      onSubmit=${(ev) => {
17        ev.preventDefault();
18
19        const date = datepicker.getDate();
20        onSubmit(date);
21
22        datepicker.setDate({ clear: true });
23      }}
24    >
25      <div id="datepicker"></div>
26      <button type="submit" disabled=${submitted}>Submit</button>
27    </form>
28  `;
29};