Skip to content

Add Date Picker and Calendar registry components - #120

Open
MUFFANUJ wants to merge 7 commits into
nebari-dev:mainfrom
MUFFANUJ:datePicker
Open

Add Date Picker and Calendar registry components#120
MUFFANUJ wants to merge 7 commits into
nebari-dev:mainfrom
MUFFANUJ:datePicker

Conversation

@MUFFANUJ

Copy link
Copy Markdown
Collaborator

Reference Issues or PRs

Closes #114

What does this implement/fix?

Put a x in the boxes that apply

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds a feature)
  • Breaking change (fix or feature that would cause existing features not to work as expected)
  • Documentation Update
  • Code style update (formatting, renaming)
  • Refactoring (no functional changes, no API changes)
  • Build related changes
  • Other (please describe):

Testing

  • Did you test the pull request locally?
  • Did you add new tests?

Documentation

Access-centered content checklist

Text styling

  • The content is written with plain language (where relevant).
  • If there are headers, they use the proper header tags (with only one level-one header: H1 or # in markdown).
  • All links describe where they link to (for example, check the Nebari website).
  • This content adheres to the Nebari style guides.

Non-text content

  • All content is represented as text (for example, images need alt text, and videos need captions or descriptive transcripts).
  • If there are emojis, there are not more than three in a row.
  • Don't use flashing GIFs or videos.
  • If the content were to be read as plain text, it still makes sense, and no information is missing.

Any other comments?

Adds reusable Calendar and Day components plus a DatePicker for single date, date range, date & time, and segmented typed date entry. The calendar includes the 6x7 month grid, day states, range states, accessible grid roles, keyboard navigation, and popover-surface styling; DatePicker composes Nebari Field with an input-styled Base UI popover trigger, time slots, controlled value callbacks, and segmented MM/DD/YYYY entry. Stories and tests cover the state matrix, examples, selection behavior, disabled dates, popover open/close, keyboard range extension, and accessibility behavior.

@MUFFANUJ

Copy link
Copy Markdown
Collaborator Author

Range selection uses the auto-normalize model: after a start date is selected, clicking an earlier date completes the range by swapping the dates, so the earlier date becomes from, and the original start becomes to. Some calendars instead restart the range when the second date is earlier; this implementation intentionally completes the range in either direction. I'm open to suggestions, if any!

@smeragoel
smeragoel self-requested a review August 12, 2026 22:41

@smeragoel smeragoel left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @MUFFANUJ! I have a few things I noticed, rest everything looks awesome:

Calendar:

  1. When going through the calendar with a keyboard, if I encounter a disabled day, I can't seem to move forward by skipping the disabled day.
  2. On the demo stories, could we use the real current date and current month rather than seeding July 2026? Otherwise, it can get confusing what's being higlighted.
  3. Drop opacity-50 from disabled days — muted-foreground is already our disabled-text token
  4. Month change isn't announced. Clicking the chevrons or hitting PageUp/PageDown swaps the whole grid but nothing is announced. An aria-live="polite" on the calendar-caption would cover it.

Date Picker:

  1. Segmented mode (1 and 4 are agent detected, so I'd appreciate a quick double-check on that)
    1. Segmented Mode is a you type into. Screen readers announce "button", Enter/Space do nothing, and there's no inputmode so on touch no soft keyboard appears and the mode would be unusable on mobile.
    2. No invalid feedback. I typed 99992026 and it displays 99/99/2026 with no aria-invalid, no error border, and the underlying date unchanged. The user would have no idea they've entered invalid date.
    3. This one is a design issue. The trigger shows a calendar icon but has no popover at all. Having the popover affordance is misleading, so I have removed the calendar icon for segmented control from the design.
    4. The accessible name reads "…Year 2026 active" while a separate aria-describedby says "Year segment active." which is the same information twice, and "active" as a bare word in a name is odd.
  2. Usually we skip type-state matrix in the story and support any odd / unconventional state that needs to be demonstrated with an example instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add the Date Picker Component

3 participants