feat(web): replace datetime inputs with calendar component for assignment dates

fvcci · fvcci · commit 17e7fec0fd34 · 2026-03-24T21:38:26.000-04:00
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -39,6 +39,7 @@
     "lucide-react": "^0.552.0",
     "next": "16.0.10",
     "react": "catalog:react19",
+    "react-day-picker": "^9.14.0",
     "react-markdown": "^10.1.0",
     "react-scrubber": "^2.1.0",
     "react-shiki": "^0.9.0",
diff --git a/apps/nextjs/src/app/teacher/classroom/[id]/assignment/new/page.tsx b/apps/nextjs/src/app/teacher/classroom/[id]/assignment/new/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { FormEvent } from "react";
+import type { DateRange } from "react-day-picker";
 import { use, useRef, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -11,6 +12,7 @@ import { toast } from "sonner";
 import type { Id } from "@package/backend/convex/_generated/dataModel";
 import { api } from "@package/backend/convex/_generated/api";
 import { Button } from "@package/ui/button";
+import { Calendar } from "@package/ui/calendar";
 import {
   Card,
   CardContent,
@@ -27,12 +29,6 @@ import { Editor } from "~/components/editor";
 import { StarterCodeUploader } from "~/components/starter-code-uploader";
 import { Authenticated, AuthLoading, Unauthenticated } from "~/lib/auth";
 
-function formatDateForInput(timestamp: number) {
-  const date = new Date(timestamp);
-  const offset = date.getTimezoneOffset() * 60_000;
-  return new Date(date.getTime() - offset).toISOString().slice(0, 16);
-}
-
 function NewAssignmentForm({ classroomId }: { classroomId: Id<"classrooms"> }) {
   const router = useRouter();
   const createAssignment = useMutation(
@@ -48,30 +44,27 @@ function NewAssignmentForm({ classroomId }: { classroomId: Id<"classrooms"> }) {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
-  const [releaseDate, setReleaseDate] = useState(
-    formatDateForInput(Date.now()),
-  );
-  const [dueDate, setDueDate] = useState(
-    formatDateForInput(Date.now() + 24 * 60 * 60 * 1000),
-  );
+  const [dateRange, setDateRange] = useState<DateRange>(defaultDateRange());
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setIsSubmitting(true);
 
     try {
-      const parsedReleaseDate = Date.parse(releaseDate);
-      const parsedDueDate = Date.parse(dueDate);
-
-      if (Number.isNaN(parsedReleaseDate) || Number.isNaN(parsedDueDate)) {
-        throw new Error("Invalid date values");
-      }
-      if (parsedDueDate <= parsedReleaseDate) {
-        throw new Error("Due date must be after release date");
+      if (!dateRange.from || !dateRange.to) {
+        throw new Error("Please select a date range");
       }
       if (!name.trim()) {
         throw new Error("Assignment name is required");
       }
 
+      const releaseDateVal = new Date(dateRange.from);
+      const dueDateVal = new Date(dateRange.to);
+
+      if (dueDateVal.getTime() <= releaseDateVal.getTime()) {
+        throw new Error("Due date must be after release date");
+      }
+
       // Upload starter code first (if any), before creating the assignment
       if (uploaderRef.current?.hasFiles()) {
         storageKeyRef.current = null;
@@ -82,8 +75,8 @@ function NewAssignmentForm({ classroomId }: { classroomId: Id<"classrooms"> }) {
         classroomId,
         name: name.trim(),
         description: description.trim() || undefined,
-        releaseDate: parsedReleaseDate,
-        dueDate: parsedDueDate,
+        releaseDate: releaseDateVal.getTime(),
+        dueDate: dueDateVal.getTime(),
         starterCodeStorageKey: storageKeyRef.current ?? undefined,
       });
 
@@ -134,25 +127,60 @@ function NewAssignmentForm({ classroomId }: { classroomId: Id<"classrooms"> }) {
                 placeholder="Week 3 - Sorting Algorithms"
               />
             </div>
+            <Label htmlFor="availability-period">Availability Period</Label>
+            <Calendar
+              className="w-full"
+              mode="range"
+              defaultMonth={dateRange.from}
+              selected={dateRange}
+              onSelect={(newDateRange) =>
+                setDateRange(updateDateRange(dateRange, newDateRange))
+              }
+              numberOfMonths={2}
+              showOutsideDays={false}
+              required
+            />
             <div className="grid gap-4 md:grid-cols-2">
               <div className="space-y-2">
-                <Label htmlFor="release-date">Release Date</Label>
+                <Label htmlFor="release-time">
+                  Availability Start Time / Release Time
+                </Label>
                 <Input
-                  id="release-date"
-                  type="datetime-local"
+                  id="release-time"
+                  type="time"
                   required
-                  value={releaseDate}
-                  onChange={(event) => setReleaseDate(event.target.value)}
+                  // can't figure out a proper way to colour this. Colouring the text
+                  // and background don't work, so we'll settle with inverting the colour
+                  className="[&::-webkit-calendar-picker-indicator]:invert"
+                  value={formatTime(dateRange.from)}
+                  onChange={(event) =>
+                    setDateRange(
+                      updateDateRangeTime(
+                        dateRange,
+                        "from",
+                        event.target.value,
+                      ),
+                    )
+                  }
                 />
               </div>
               <div className="space-y-2">
-                <Label htmlFor="due-date">Due Date</Label>
+                <Label htmlFor="due-time">
+                  Availability End Time / Due Time
+                </Label>
                 <Input
-                  id="due-date"
-                  type="datetime-local"
+                  id="due-time"
+                  type="time"
                   required
-                  value={dueDate}
-                  onChange={(event) => setDueDate(event.target.value)}
+                  // can't figure out a proper way to colour this. Colouring the text
+                  // and background don't work, so we'll settle with inverting the colour
+                  className="[&::-webkit-calendar-picker-indicator]:invert"
+                  value={formatTime(dateRange.to)}
+                  onChange={(event) =>
+                    setDateRange(
+                      updateDateRangeTime(dateRange, "to", event.target.value),
+                    )
+                  }
                 />
               </div>
             </div>
@@ -226,3 +254,53 @@ export default function NewAssignmentPage({
     </main>
   );
 }
+
+function formatTime(date: Date | undefined) {
+  if (!date) return "";
+  return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")}`;
+}
+
+function defaultDateRange() {
+  const from = new Date();
+  const to = new Date(from);
+  to.setHours(23, 59, 59, 999);
+  return { from, to };
+}
+
+function updateDateRange(
+  dateRange: DateRange,
+  newDateRange?: DateRange,
+): DateRange {
+  const newFrom = newDateRange?.from;
+  newFrom?.setHours(
+    dateRange.from?.getHours() ?? 0,
+    dateRange.from?.getMinutes(),
+  );
+  const newTo = newDateRange?.to;
+  if (dateRange.to) {
+    const hours = dateRange.to.getHours();
+    const minutes = dateRange.to.getMinutes();
+    newTo?.setHours(hours, minutes, 59, 999);
+  }
+  return { from: newFrom, to: newTo };
+}
+
+function updateDateRangeTime(
+  dateRange: DateRange | undefined,
+  field: "from" | "to",
+  time: string,
+) {
+  if (!dateRange) return defaultDateRange();
+  const currentDate = dateRange[field];
+  if (!currentDate) return dateRange;
+  const [hours, minutes] = time.split(":").map(Number) as [number, number];
+  const newDate = new Date(currentDate);
+  newDate.setHours(
+    hours,
+    minutes,
+    field === "to" ? 59 : 0,
+    field === "to" ? 999 : 0,
+  );
+  console.log(newDate);
+  return { ...dateRange, [field]: newDate };
+}
diff --git a/packages/backend/convex/_generated/api.d.ts b/packages/backend/convex/_generated/api.d.ts
@@ -11,7 +11,6 @@
 import type * as api_coder from "../api/coder.js";
 import type * as api_extension from "../api/extension.js";
 import type * as auth from "../auth.js";
-import type * as helpers_coder from "../helpers/coder.js";
 import type * as helpers_minio from "../helpers/minio.js";
 import type * as helpers_roles from "../helpers/roles.js";
 import type * as helpers_storageKeys from "../helpers/storageKeys.js";
@@ -37,7 +36,6 @@ declare const fullApi: ApiFromModules<{
   "api/coder": typeof api_coder;
   "api/extension": typeof api_extension;
   auth: typeof auth;
-  "helpers/coder": typeof helpers_coder;
   "helpers/minio": typeof helpers_minio;
   "helpers/roles": typeof helpers_roles;
   "helpers/storageKeys": typeof helpers_storageKeys;
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -5,6 +5,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./button": "./src/button.tsx",
+    "./calendar": "./src/calendar.tsx",
     "./card": "./src/card.tsx",
     "./dialog": "./src/dialog.tsx",
     "./dropdown-menu": "./src/dropdown-menu.tsx",
@@ -16,8 +17,7 @@
     "./spinner": "./src/spinner.tsx",
     "./theme": "./src/theme.tsx",
     "./toast": "./src/toast.tsx",
-    "./input-group": "./src/input-group.tsx",
-    "./dialog": "./src/dialog.tsx"
+    "./input-group": "./src/input-group.tsx"
   },
   "license": "MIT",
   "scripts": {
@@ -35,8 +35,10 @@
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^0.552.0",
     "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
     "react-hook-form": "^7.66.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
diff --git a/packages/ui/src/calendar.tsx b/packages/ui/src/calendar.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
