feat(web): replace datetime inputs with date range picker in assignment edit view

[fvcci]

TL;DR

Replaced separate datetime-local inputs with a unified date range picker component for assignment release and due dates.

What changed?

view mode remains the same:

• Removed individual datetime-local inputs for release date and due date
• Integrated the DatePickerWithRange component for date selection
• Updated the assignment draft interface to use a DateRange object instead of separate date strings
• Removed the formatDateForInput utility function
• Enhanced the DatePickerWithRange component with a size prop to support narrow layouts
• Fixed the display order of release date and due date in the assignment details view
• Improved date validation to check for complete date range selection

How to test?

1. Navigate to a teacher's assignment page
2. Click the edit button to modify an assignment
3. Verify the new date range picker displays correctly with calendar and time inputs
4. Test selecting different date ranges and times
5. Save the assignment and confirm dates are preserved correctly
6. Check that the assignment details view shows release and due dates in the correct order

Why make this change?

This change provides a more intuitive and consistent user experience for date selection by replacing separate datetime inputs with a visual calendar interface. The unified date range picker makes it clearer that users are selecting a period with start and end dates, reducing potential confusion and input errors.

solves #266

[fvcci]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• feat(web): replace datetime inputs with date range picker in assignment edit view #325 👈 (View in Graphite)
• refactor(web): extract DatePickerWithRange component from assignment form #324
• feat(web): replace datetime inputs with calendar component for assignment dates #323
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

Greptile Summary

This PR replaces the two separate datetime-local inputs in the assignment edit view with the shared DatePickerWithRange component, adds a size prop to that component to accommodate the narrow sidebar layout, and fixes a pre-existing bug where Release Date and Due Date were displayed in swapped order in view mode.

• Mobile regression in date-picker-with-range.tsx: The wide variant now uses grid-cols-2 instead of the previous md:grid-cols-2, removing responsive stacking on small screens. This affects the existing new assignment page which uses the wide (default) variant.
• Unused label prop: The label?: string field in the DatePickerWithRange props interface is never consumed by the component and should be removed.
• Missing resolves #issue-id: The PR description does not include a resolves #issue-id reference as required by the PR template.
• PR scope: This PR both modifies the DatePickerWithRange component (adding the size prop) and integrates it into a new page. Per project conventions these concerns should ideally land in separate PRs.

Confidence Score: 4/5

• Safe to merge after fixing the md: breakpoint regression in date-picker-with-range.tsx.
• The page-level integration is clean and correct. One concrete fix is needed in the component: restoring the md: prefix on the wide grid variant to avoid breaking mobile layout on the existing new assignment page. Everything else (validation logic, date order fix, draft simplification) is correct.
• apps/nextjs/src/components/date-picker-with-range.tsx — the gridCols value for wide mode needs the md: breakpoint restored.

Important Files Changed

Filename	Overview
apps/nextjs/src/components/date-picker-with-range.tsx	Adds a size prop ("wide"
apps/nextjs/src/app/teacher/classroom/[id]/assignment/[assignmentId]/page.tsx	Replaces two separate datetime-local inputs with DatePickerWithRange size="narrow", updates AssignmentDraft to hold a DateRange, fixes the swapped Release/Due Date display order in view mode, and removes the now-unnecessary formatDateForInput helper. Logic is correct.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/nextjs/src/components/date-picker-with-range.tsx
Line: 27

Comment:
**`wide` mode loses mobile responsiveness**

The old code used `md:grid-cols-2`, so on small screens the two time inputs stacked vertically. With the new `size` prop, `wide` maps to `"grid-cols-2"` (no breakpoint), making the layout always two columns regardless of screen size. This is a regression for users of the default `wide` variant (e.g., `apps/nextjs/src/app/teacher/classroom/[id]/assignment/new/page.tsx`).

```suggestion
  const gridCols = size === "narrow" ? "grid-cols-1" : "md:grid-cols-2";
```

**Rule Used:** Use 'md:' prefix for desktop breakpoints in Tailwi... ([source](https://app.greptile.com/review/custom-context?memory=9f03315b-fdba-4890-b797-0f3e3ac5baf2))

**Learnt From**
[deltahacks/landing-12#17](https://github.com/deltahacks/landing-12/pull/17)

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: apps/nextjs/src/components/date-picker-with-range.tsx
Line: 22

Comment:
**Unused `label` prop in interface**

`label?: string` is declared in the props interface but never referenced inside the component — the label text is hardcoded as `"Availability Period"`. This dead declaration should be removed to avoid confusion.

```suggestion

```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "refactor(web): replace datetime inputs w..." | Re-trigger Greptile}