feat(date-picker-form): Implemented not allowing future dates by default (#171)

Author: Nicu

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "private": false,
   "dependencies": {
     "bulma": "^0.8.0",

package.json

@@ -10,11 +10,23 @@ export default {
     },
     {
       questionId: 2,
+      questionText: "De la ce data re-incepi lucrul?",
+      type: "DATE_PICKER",
+      allowFuture: true
+    },
+    {
+      questionId: 3,
       questionText: "La ce data si ora ai iesit afara?",
       type: "DATE_TIME_PICKER"
     },
     {
-      questionId: 3,
+      questionId: 4,
+      questionText: "La ce data si ora esti programat la medic?",
+      type: "DATE_TIME_PICKER",
+      allowFuture: true
+    },
+    {
+      questionId: 5,
       type: "FINAL",
       questionText: "Ce trebuie sa faci?",
       options: [

src/components/form/data/datePickers.js

@@ -4,6 +4,7 @@ import { ListHeader } from "../list-header/list-header";
 import ReactDatePicker from "react-datepicker";
 
 import ro from "date-fns/locale/ro";
+import { setHours, setMinutes, isSameDay } from "date-fns";
 
 import "react-datepicker/dist/react-datepicker.css";
 import "./datePicker.css";
@@ -18,6 +19,8 @@ export const DatePicker = ({
     currentResponse ? currentResponse : null
   );
 
+  const maxDate = !question.allowFuture ? new Date() : null;
+
   const onChange = date => {
     setStartDate(date);
     const answer = {
@@ -29,9 +32,21 @@ export const DatePicker = ({
 
   const getDatePicker = () => {
     if (withTime) {
-      return <DateTimePicker startDate={startDate} onChange={onChange} />;
+      return (
+        <DateTimePicker
+          startDate={startDate}
+          maxDate={maxDate}
+          onChange={onChange}
+        />
+      );
     } else {
-      return <DateOnlyPicker startDate={startDate} onChange={onChange} />;
+      return (
+        <DateOnlyPicker
+          startDate={startDate}
+          maxDate={maxDate}
+          onChange={onChange}
+        />
+      );
     }
   };
 
@@ -43,7 +58,7 @@ export const DatePicker = ({
   );
 };
 
-const DateOnlyPicker = ({ startDate, onChange }) => {
+const DateOnlyPicker = ({ startDate, maxDate, onChange }) => {
   return (
     <ReactDatePicker
       customInput={<CustomInput />}
@@ -52,23 +67,60 @@ const DateOnlyPicker = ({ startDate, onChange }) => {
       onChange={onChange}
       locale={ro}
       dateFormat={"d MMMM yyyy"}
+      maxDate={maxDate}
     />
   );
 };
 
-const DateTimePicker = ({ startDate, onChange }) => {
+const DateTimePicker = ({ startDate, maxDate, onChange }) => {
+  const computeMinTime = date => {
+    if (!maxDate) {
+      return;
+    }
+
+    if (isSameDay(date, maxDate)) {
+      return setHours(setMinutes(new Date(), 0), 0);
+    }
+  };
+
+  const computeMaxTime = date => {
+    if (!maxDate) {
+      return;
+    }
+
+    if (isSameDay(date, maxDate)) {
+      return maxDate;
+    }
+  };
+
+  const [minTime, setMinTime] = useState(
+    computeMinTime(startDate || new Date())
+  );
+  const [maxTime, setMaxTime] = useState(
+    computeMaxTime(startDate || new Date())
+  );
+
+  const handleDatetimeChange = date => {
+    setMinTime(computeMinTime(date));
+    setMaxTime(computeMaxTime(date));
+    onChange(date);
+  };
+
   return (
     <ReactDatePicker
       customInput={<CustomInput />}
       placeholderText={"Introdu data si ora"}
       selected={startDate}
-      onChange={onChange}
+      onChange={handleDatetimeChange}
       locale={ro}
       dateFormat={"d MMMM yyyy HH:mm"}
       showTimeSelect
       timeFormat="HH:mm"
       timeIntervals={15}
       timeCaption="Ora"
+      maxDate={maxDate}
+      minTime={minTime}
+      maxTime={maxTime}
     />
   );
 };
@@ -97,18 +149,21 @@ DatePicker.propTypes = {
   withTime: PropTypes.bool,
   question: PropTypes.shape({
     questionId: PropTypes.number.isRequired,
-    questionText: PropTypes.string.isRequired
+    questionText: PropTypes.string.isRequired,
+    allowFuture: PropTypes.bool
   }),
   onAnswer: PropTypes.func,
   currentResponse: PropTypes.object
 };
 
 DateTimePicker.propTypes = {
   startDate: PropTypes.object,
+  maxDate: PropTypes.instanceOf(Date),
   onChange: PropTypes.func.isRequired
 };
 
 DateOnlyPicker.propTypes = {
   startDate: PropTypes.object,
+  maxDate: PropTypes.instanceOf(Date),
   onChange: PropTypes.func.isRequired
 };