feat(DatePicker): New DatePicker component by aresnik11 · Pull Request #3283 · Codecademy/gamut

aresnik11 · 2026-03-13T19:33:35Z

Overview

WIP of the new DatePicker component. Looking for some early feedback, comments, questions, concerns. I left some comments in the code of things I'm questioning.

Things I know are missing/not completely working:

calendar quick actions
input validation when typing in a date
locale sort of works but needs more + translation for hardcoded text
tests

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1520
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

Go to story X
Do something
Do that something in dark mode
Check it with VO
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-03-13T19:35:03Z

View your CI Pipeline Execution ↗ for commit a19fc7b

☁️ Nx Cloud last updated this comment at 2026-03-17 15:03:19 UTC

codecov · 2026-03-13T19:44:53Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
811	1	810	0

View the top 1 failed test(s) by shortest run time

 Gamut Exported Keys

Stack Traces | 0.004s run time

Error: expect(received).toMatchSnapshot()

Snapshot name: `Gamut Exported Keys 1`

- Snapshot  - 1
+ Received  + 0

@@ -14,11 +14,10 @@
    "CalendarBody",
    "CalendarFooter",
    "CalendarHeader",
    "Card",
    "Checkbox",
-   "clampToMonth",
    "Coachmark",
    "Column",
    "ConnectedCheckbox",
    "ConnectedForm",
    "ConnectedFormGroup",
    at Object.<anonymous> (.../gamut/__tests__/gamut.test.ts:7:25)
    at Promise.then.completed (.../jest-circus/build/utils.js:298:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (.../jest-circus/build/utils.js:231:10)
    at _callCircusTest (.../jest-circus/build/run.js:316:40)
    at async _runTest (.../jest-circus/build/run.js:252:3)
    at async _runTestsForDescribeBlock (.../jest-circus/build/run.js:126:9)
    at async run (.../jest-circus/build/run.js:71:3)
    at async runAndTransformResultsToJestFormat (.../build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
    at async jestAdapter (.../build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
    at async runTestInternal (.../jest-runner/build/runTest.js:367:16)
    at async runTest (.../jest-runner/build/runTest.js:444:34)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

dreamwasp

this is the default, i noticed when i navigated dates in the Calendar story the second month doesn't change (it stays March the whole time)

the DatePicker itself looks way better and i like the simplicity of 'useDatePicker' hook. these are just my first thoughts, i'll take a deeper look at accessibility + structure later today!

packages/gamut/src/DatePicker/Calendar/utils/dateGrid.ts

dreamwasp · 2026-03-16T15:53:18Z

packages/gamut/src/DatePicker/Calendar/utils/dateGrid.ts

+  // Pad end of last week with nulls
+  if (currentWeek.length > 0) {
+    while (currentWeek.length < DAYS_PER_WEEK) {
+      currentWeek.push(null);
+    }
+    weeks.push(currentWeek);
+  }


what are these null returns for? days left over at the end of the month?

packages/gamut/src/DatePicker/Calendar/utils/dateGrid.ts

dreamwasp · 2026-03-16T15:54:42Z

packages/gamut/src/DatePicker/Calendar/utils/dateGrid.ts

+  return disabledDates.some((d) => isSameDay(date, d));
+}
+
+/**


i don't really understand what this means - clamp?

packages/gamut/src/DatePicker/Calendar/utils/format.ts

packages/gamut/src/DatePicker/Calendar/types.ts

dreamwasp · 2026-03-16T16:10:38Z

packages/gamut/src/DatePicker/Calendar/Calendar.tsx

+    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.12)',
+    width: 'max-content',
+  })
+);


i found this confusing since this just a wrapper and DatePickerCalendar is the actual calendar

yeah this can be prettier. DatePickerCalendar is for DatePicker, but in theory the inside calendar parts could be used on their own

packages/gamut/src/DatePicker/Calendar/CalendarBody.tsx

packages/gamut/src/DatePicker/DatePickerCalendar.tsx

aresnik11 · 2026-03-16T16:41:38Z

this is the default, i noticed when i navigated dates in the Calendar story the second month doesn't change (it stays March the whole time)
the DatePicker itself looks way better and i like the simplicity of 'useDatePicker' hook. these are just my first thoughts, i'll take a deeper look at accessibility + structure later today!

@dreamwasp lol Calendar is only supposed to show the one month, the header clearly needs some work. thanks for the callout!

codecademydev · 2026-03-17T15:03:49Z

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

github-actions · 2026-03-17T15:06:01Z

🚀 Styleguide deploy preview ready!

Preview URL: https://69b96dd3e3cc853fffb9a86a--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69b96dd3e3cc853fffb9a86a

aresnik11 added 22 commits March 2, 2026 17:05

calendar phase 1

fd2fbce

add focus management

0ffb424

add input

b8a856d

datepicker

c096fe9

clean up

9346ac9

refactor datepicker

00a8584

clean up hooks

1946d73

update exports

39d0de0

add missing validation file

23f593d

clean up inputref

c1c9245

wip fix for typing date

9a8f70d

cleaning up

82854c8

update range logic

4f39ff9

range logic when specific input is focused

d194237

deselect logic

3bbeb01

fix lint

a6cbe80

fix story

a56426f

fix lint again

f79ce4a

update snapshot

e0ee942

fix lint

a417554

show 2 months on larger screens

cf4a438

style updates

d3f6fac

aresnik11 changed the base branch from ajr-datepicker-range to main March 16, 2026 15:13

aresnik11 changed the title ~~Ajr datepicker styles~~ feat(DatePicker): New DatePicker component Mar 16, 2026

aresnik11 mentioned this pull request Mar 16, 2026

DatePicker range #3282

Draft

6 tasks

aresnik11 requested review from LinKCoding, dreamwasp and sh0ji March 16, 2026 15:16

dreamwasp reviewed Mar 16, 2026

View reviewed changes

aresnik11 added 2 commits March 17, 2026 10:53

PR feedback

e615f9f

fix today in range color

a19fc7b

Conversation

aresnik11 commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dreamwasp Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dreamwasp Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dreamwasp Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

aresnik11 Mar 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

aresnik11 commented Mar 16, 2026

Uh oh!

codecademydev commented Mar 17, 2026

Uh oh!

github-actions bot commented Mar 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

aresnik11 commented Mar 13, 2026 •

edited

Loading

nx-cloud bot commented Mar 13, 2026 •

edited

Loading

codecov bot commented Mar 13, 2026 •

edited

Loading