Improve Hackathon Date Inputs in Submission Form using date-fns

[anmolsah]

Context

In the hackathon submission form (app/routes/submit.tsx), we currently use native <input type="datetime-local"> fields. These fields can be clunky, cause compatibility issues across different browsers, and do not provide a premium user experience.

We want to replace these with a custom, highly intuitive date selector (e.g. separate Year/Month/Day/Time selectors or a styled custom calendar picker) utilizing the date-fns library to parse, format, and validate date inputs.

Requirements

1. date-fns Integration: Install and use date-fns for date manipulation, validation, and parsing.
2. Improved User Interface:
   • Replace the native inputs with custom selectors (e.g., custom dropdowns for Day, Month, Year, and Time, or a custom-built calendar popup).
   • Ensure the new components fit the premium dark theme styling in app.css.
3. Date Validation:
   • The "End Date" must be chronologically after the "Start Date".
   • Validate that the dates are valid formats using date-fns's helper functions (like isValid or isAfter).
   • Format the final submitted dates as ISO 8601 strings.

Files to Tweak

• app/routes/submit.tsx (Look at state handlers for startsAt/endsAt and the date inputs in the form layout).
• package.json (Add date-fns to dependencies).

Guidelines

• Avoid using bloated date libraries; date-fns is highly modular and preferred.
• Ensure the input fields remain fully responsive and look premium on mobile screens.
• Run npm run typecheck to verify TypeScript compile status after introducing the library.