Skip to content

feat(#782): add support for "month-year" and "year" appearances#786

Merged
latin-panda merged 6 commits intomainfrom
add-spinner-date-widgets
Apr 24, 2026
Merged

feat(#782): add support for "month-year" and "year" appearances#786
latin-panda merged 6 commits intomainfrom
add-spinner-date-widgets

Conversation

@latin-panda
Copy link
Copy Markdown
Collaborator

@latin-panda latin-panda commented Apr 23, 2026

Closes #782

I have verified this PR works in these browsers (latest versions):

  • Chrome
  • Firefox
  • Safari (macOS)
  • Safari (iOS)
  • Chrome for Android
  • Not applicable

What else has been done to verify that this works as intended?

date-appearances.mp4

Why is this the best possible solution? Were any other approaches considered?

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

Do we need any specific form for testing your changes? If so, please attach one.

What's changed

  • Hides the calendar's "today" button but leaves the "clear" button. The "today" button didn't make much sense in month-year and year appearances.
  • Per spec, the month-year appearance sets the value at the start of the month. While year at the start of the year.

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 23, 2026

🦋 Changeset detected

Latest commit: 2d1a5cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@getodk/web-forms Minor
@getodk/common Patch
@getodk/xpath Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

// PrimeVue has its date format convention, for example, 'yy' = 4-digit year
const pickerConfig = computed(() => {
if (isMonthYear.value) {
return { view: 'month', dateFormat: 'MM yy', placeholder: '' };
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

Users can type a value:

  • month-year: They must enter the full month name in the locale, space, and then the year, as required by PrimeVue. I'm open to suggestions for a suitable placeholder text (it's empty for now) I was trying to avoid adding anything too technical or anything that would require translation.

  • year: Just typing 4-digit year.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

If we can't come up with anything better I'd use the dateFormat as the placeholder, eg: MM yyyy or maybe mmm yyyy. I don't know how widely it's understood but if you know what it means it's really helpful and doesn't need translation.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

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

I've set: mmm yyyy

@latin-panda latin-panda marked this pull request as ready for review April 23, 2026 18:09
@latin-panda latin-panda requested a review from garethbowen April 23, 2026 18:09
@latin-panda
Copy link
Copy Markdown
Collaborator Author

@garethbowen, This is ready for review. Could you please have a look? It's a small one.

@latin-panda latin-panda changed the title Add spinner date widgets feat(#782): Add spinner date widgets Apr 23, 2026
@latin-panda latin-panda changed the title feat(#782): Add spinner date widgets feat(#782): add support for "month-year" and "year" appearances Apr 23, 2026
Copy link
Copy Markdown
Collaborator

@garethbowen garethbowen left a comment

Choose a reason for hiding this comment

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

Very nice!

Comment thread packages/web-forms/src/components/form-elements/input/InputDate.vue Outdated
@latin-panda latin-panda merged commit a64d092 into main Apr 24, 2026
53 checks passed
@latin-panda latin-panda deleted the add-spinner-date-widgets branch April 24, 2026 14:07
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.

Implement month-year and year spinner date widgets

2 participants