Prevent submission of days in the future

src/controllers/calendar.ts

@@ -45,6 +45,8 @@ export async function getCalendar(
               dayjs(day.date).isSame(monthDate.date(i + 1)),
             ),
             isToday: today.isSame(monthDate.date(i + 1), "day"),
+            isPast: monthDate.date(i + 1).isBefore(today, "day"),
+            isFuture: monthDate.date(i + 1).isAfter(today, "day"),
           };
         }),
       };

src/controllers/day.ts

@@ -17,6 +17,15 @@ export async function submitDay(
       return;
     }
 
+    if (dayjs(req.body.date).isAfter(dayjs(), "day")) {
+      res.statusCode = 422;
+      res.json({
+        success: false,
+        message: "Date is in the future",
+      });
+      return;
+    }
+
     if (await day.exists(req.body.date, (req.user as any).id)) {
       res.statusCode = 500;
       res.json({ success: false, message: "Date entry already exists" });

src/public/calendar.css

@@ -27,6 +27,10 @@
   background: #cfcfcf;
 }
 
+.day:disabled {
+  cursor: not-allowed;
+}
+
 .day:focus {
   border: 0;
   outline: 0;
@@ -47,7 +51,7 @@
   box-shadow: 0 0 30px rgba(255, 1, 196, 0.7);
 }
 
-.day:hover {
+.day:hover:not(:disabled) {
   background: gold;
 }
 

src/views/calendar.handlebars

@@ -55,6 +55,13 @@
                 class="day today"
                 data-date="{{date}}"
               >{{day}}</button>
+            {{else if isFuture}}
+              <button
+                id="{{date}}"
+                disabled
+                class="day"
+                data-date="{{date}}"
+              >{{day}}</button>
             {{else}}
               <button
                 id="{{date}}"