Date Picker Integrated with the Add Task Modal

[Rustix69]

Description

Added a date picker component to the task form's Due field to improve user experience when creating tasks. Previously, users had to manually type dates in YYYY-MM-DD format, which was error-prone and inconvenient. Now users can select dates from a visual calendar dropdown.

Changes:

• Installed react-day-picker dependency for calendar functionality

• Created calendar.tsx UI component with proper styling and theme integration

• Created date-picker.tsx UI component with popover and modal support

• Added cn() utility function to lib/utils.tsx for CSS class merging

• Integrated DatePicker into both "Add Task" dialogs (when tasks exist and when no tasks found)

• Fixed modal conflict issue where clicking the calendar would close the parent dialog

• Dates are automatically formatted to YYYY-MM-DD format for backend compatibility

• Fixes: Add Calendar Date Picker to “Due” Field in Task Form #170

Checklist

• Ran npx prettier --write . (for formatting)
• Ran gofmt -w . (for Go backend) - N/A, frontend-only changes
• Ran npm test (for JS/TS testing)
• Added unit tests, if applicable
• Verified all tests pass (build successful)
• Updated documentation, if needed

Additional Notes

Technical Details:

• Uses shadcn/ui date picker pattern with Radix UI primitives
• Calendar respects dark/light theme modes
• modal={true} prop on Popover prevents dialog closure conflicts
• type="button" prevents accidental form submissions
• Date format displayed as localized (e.g., "November 12, 2025") but stored as YYYY-MM-DD

Screenshots:

Dependencies Added:

• react-day-picker@^8.10.1

Files Modified:

• frontend/src/components/HomeComponents/Tasks/Tasks.tsx
• frontend/src/lib/utils.tsx

Files Created:

• frontend/src/components/ui/calendar.tsx
• frontend/src/components/ui/date-picker.tsx

[its-me-abhishek]

Please add some prototype video if possible, inside the PR, helps me track changes faster!

[Rustix69]

@its-me-abhishek Hey This is the Screen Recording of the changes, I had added a calender there.

Screencast.from.2025-11-13.23-35-37.webm

[Rustix69]

@its-me-abhishek Go through this once after this merge i will push the Due Date edit PR that also contain the same component calender

[its-me-abhishek]

Tested and works fine! Great work @Rustix69 , Can we also add a time picker that appears just after picking up a date? Currently its set to 12:00:00 by default

[Rustix69]

@its-me-abhishek Done I will raise a Issue and Submit the PR as Well