aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/DateInput.js
blob: b5962f0feaf1ef760170d61c129296d6ba92545c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// React import
import { useEffect, useState, useRef } from "react";

/**
 * Componenet for checkins. Has a toggle to show more info.
 * @param {Object} props The props of the component.
 * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
 */
function DateInput(props) {
  const startInput = useRef();
  const endInput = useRef();

  const toValue = date => date.toISOString().slice(0, 10);

  useEffect(() => setInitDates(), []);

  const setInitDates = () => {
    startInput.current.value = toValue(new Date());

    // Two weeks away -> from stack overflow,
    const fortnightAway = toValue(new Date(Date.now() - 12096e5));
    endInput.current.value = fortnightAway;
  }

  return (
    <>
      <label for="start">Start date:</label>
      <input type="date" id="start" ref={startInput} onChange={(e) => props.setStart(e.target.value)}/>
      <label for="end">End date:</label>
      <input type="date" id="end" ref={endInput} onChange={(e) => props.setEnd(e.target.value)}/>
    </>
  );
}

export default DateInput;