1 files changed, 35 insertions, 0 deletions
diff --git a/frontend/src/DateInput.js b/frontend/src/DateInput.js
new file mode 100644
index 0000000..b5962f0
--- /dev/null
+++ b/frontend/src/DateInput.js
@@ -0,0 +1,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;
+\ No newline at end of file