Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
latin-panda merged 6 commits into from
Apr 24, 2026
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a16fede
Updates feature matrix
latin-panda Apr 23, 2026
69275b5
Add support to month-year and year appearances
latin-panda Apr 23, 2026
5aaff04
changeset
latin-panda Apr 23, 2026
f287489
updates placeholder and display format
latin-panda Apr 23, 2026
4423fb7
add ticket links to feature matrix
latin-panda Apr 23, 2026
2d1a5cc
feedback
latin-panda Apr 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/short-sites-hear.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@getodk/web-forms': minor
'@getodk/common': patch
---

Add support for "month-year" and "year" date question type appearances.
82 changes: 41 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,55 +35,55 @@ This section is auto generated. Please update `feature-matrix.json` and then run
<summary>

<!-- prettier-ignore -->
##### Question types (basic functionality)<br/>🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜ 88\%
##### Question types (basic functionality)<br/>🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜ 91\%

</summary>
<br/>

| Feature <img width=250px/> | Progress |
| ------------------------------------------------------ | :------: |
| text | ✅ |
| integer | ✅ |
| decimal | ✅ |
| note | ✅ |
| select_one | ✅ |
| select_multiple | ✅ |
| select\_\*\_from_file | ✅ |
| repeat | ✅ |
| group | ✅ |
| geopoint | ✅ |
| geotrace | ✅ |
| geoshape | ✅ |
| start-geopoint | ✅ |
| range | ✅ |
| image | ✅ |
| barcode | |
| audio | ✅ |
| background-audio | |
| video | ✅ |
| [file](https://github.com/getodk/web-forms/issues/370) | ✅ |
| date | ✅ |
| time | ✅ |
| datetime | |
| rank | ✅ |
| csv-external | ✅ |
| acknowledge | ✅ |
| start | ✅ |
| end | ✅ |
| today | ✅ |
| deviceid | ✅ |
| username | ✅ |
| phonenumber | ✅ |
| email | ✅ |
| audit | |
| Feature <img width=250px/> | Progress |
| ---------------------------------------------------------- | :------: |
| text | ✅ |
| integer | ✅ |
| decimal | ✅ |
| note | ✅ |
| select_one | ✅ |
| select_multiple | ✅ |
| select\_\*\_from_file | ✅ |
| repeat | ✅ |
| group | ✅ |
| geopoint | ✅ |
| geotrace | ✅ |
| geoshape | ✅ |
| start-geopoint | ✅ |
| range | ✅ |
| image | ✅ |
| barcode | |
| audio | ✅ |
| background-audio | |
| video | ✅ |
| [file](https://github.com/getodk/web-forms/issues/370) | ✅ |
| [date](https://github.com/getodk/web-forms/issues/311) | ✅ |
| [time](https://github.com/getodk/web-forms/issues/590) | ✅ |
| [datetime](https://github.com/getodk/web-forms/issues/697) | ✅ |
| rank | ✅ |
| csv-external | ✅ |
| acknowledge | ✅ |
| start | ✅ |
| end | ✅ |
| today | ✅ |
| deviceid | ✅ |
| username | ✅ |
| phonenumber | ✅ |
| email | ✅ |
| audit | |

</details>

<details>
<summary>

<!-- prettier-ignore -->
##### Appearances<br/>🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜ 43\%
##### Appearances<br/>🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜ 47\%

</summary>
<br/>
Expand All @@ -105,9 +105,9 @@ This section is auto generated. Please update `feature-matrix.json` and then run
| draw | |
| [annotate](https://github.com/getodk/web-forms/issues/15) | |
| signature | |
| [no-calendar](https://github.com/getodk/web-forms/issues/304) | |
| [month-year](https://github.com/getodk/web-forms/issues/304) | |
| [year](https://github.com/getodk/web-forms/issues/304) | |
| [no-calendar](https://github.com/getodk/web-forms/issues/781) | |
| [month-year](https://github.com/getodk/web-forms/issues/782) | ✅ |
| [year](https://github.com/getodk/web-forms/issues/782) | ✅ |
| [ethiopian](https://github.com/getodk/web-forms/issues/315) | |
| [coptic](https://github.com/getodk/web-forms/issues/315) | |
| [islamic](https://github.com/getodk/web-forms/issues/315) | |
Expand Down
12 changes: 6 additions & 6 deletions feature-matrix.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
"background-audio": "",
"video": "✅",
"[file](https://github.com/getodk/web-forms/issues/370)": "✅",
"date": "✅",
"time": "✅",
"datetime": "",
"[date](https://github.com/getodk/web-forms/issues/311)": "✅",
"[time](https://github.com/getodk/web-forms/issues/590)": "✅",
"[datetime](https://github.com/getodk/web-forms/issues/697)": "✅",
"rank": "✅",
"csv-external": "✅",
"acknowledge": "✅",
Expand Down Expand Up @@ -51,9 +51,9 @@
"draw": "",
"[annotate](https://github.com/getodk/web-forms/issues/15)": "",
"signature": "",
"[no-calendar](https://github.com/getodk/web-forms/issues/304)": "",
"[month-year](https://github.com/getodk/web-forms/issues/304)": "",
"[year](https://github.com/getodk/web-forms/issues/304)": "",
"[no-calendar](https://github.com/getodk/web-forms/issues/781)": "",
"[month-year](https://github.com/getodk/web-forms/issues/782)": "✅",
"[year](https://github.com/getodk/web-forms/issues/782)": "✅",
"[ethiopian](https://github.com/getodk/web-forms/issues/315)": "",
"[coptic](https://github.com/getodk/web-forms/issues/315)": "",
"[islamic](https://github.com/getodk/web-forms/issues/315)": "",
Expand Down
16 changes: 8 additions & 8 deletions packages/common/src/fixtures/date-and-time/date-and-time.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
<value>When are you filling out this survey?</value>
</text>
<text id="/data/dates/date_of_birth:label">
<value>When were you born?</value>
<value>What month and year were you born?</value>
</text>
<text id="/data/dates/fruits_date:label">
<value>When was the last time you ate fruits?</value>
</text>
<text id="/data/dates/vegetables_date:label">
<value>When was the last time you ate vegetables?</value>
<value>What year did you start cultivating vegetables?</value>
</text>
<text id="/data/dates/time:label">
<value>What time is your first meal?</value>
Expand All @@ -32,13 +32,13 @@
<value>Quand allez-vous remplir ce questionnaire?</value>
</text>
<text id="/data/dates/date_of_birth:label">
<value>Quand êtes-vous né(e) ?</value>
<value>En quel mois et année êtes-vous né(e) ?</value>
</text>
<text id="/data/dates/fruits_date:label">
<value>Quand est-ce que vous avez mangé des fruits pour la dernière fois ?</value>
</text>
<text id="/data/dates/vegetables_date:label">
<value>Quand est-ce que vous avez mangé des légumes pour la dernière fois ?</value>
<value>En quelle année avez-vous commencé à cultiver des légumes ?</value>
</text>
<text id="/data/dates/time:label">
<value>À quelle heure prends-tu ton premier repas ?</value>
Expand All @@ -52,13 +52,13 @@
<value>¿Cuando está completando este formulario?</value>
</text>
<text id="/data/dates/date_of_birth:label">
<value>¿Cuál es su fecha de nacimiento?</value>
<value>¿En qué mes y año nació?</value>
</text>
<text id="/data/dates/fruits_date:label">
<value>¿Cuando fué la ultima vez que comió frutas?</value>
</text>
<text id="/data/dates/vegetables_date:label">
<value>¿Cuando fué la ultima vez que comió verduras?</value>
<value>¿En qué año empezó a cultivar verduras?</value>
</text>
<text id="/data/dates/time:label">
<value>¿A que hora es su primera comida?</value>
Expand Down Expand Up @@ -99,13 +99,13 @@
<input ref="/data/dates/survey_date">
<label ref="jr:itext('/data/dates/survey_date:label')"/>
</input>
<input ref="/data/dates/date_of_birth">
<input ref="/data/dates/date_of_birth" appearance="month-year">
<label ref="jr:itext('/data/dates/date_of_birth:label')"/>
</input>
<input ref="/data/dates/fruits_date">
<label ref="jr:itext('/data/dates/fruits_date:label')"/>
</input>
<input ref="/data/dates/vegetables_date">
<input ref="/data/dates/vegetables_date" appearance="year">
<label ref="jr:itext('/data/dates/vegetables_date:label')"/>
</input>
<input ref="/data/dates/time">
Expand Down
4 changes: 4 additions & 0 deletions packages/web-forms/src/assets/styles/primevue.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
}
}

.p-datepicker-panel.hide-today-button .p-datepicker-today-button {
display: none;
}

.p-dialog {
margin: 0 24px;

Expand Down
34 changes: 33 additions & 1 deletion packages/web-forms/src/components/form-elements/input/InputDate.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,58 @@ import { useDateTimeInput } from './useDateTimeInput.ts';
const props = defineProps<{ readonly question: DateInputNode }>();
const { localeDateFormat, getTemporalString } = useDateTimeInput();

const isMonthYear = computed(() => props.question.appearances['month-year']);
const isYearOnly = computed(() => props.question.appearances.year);

const value = computed({
get: () => {
const temporalValue = getTemporalString(props.question.currentState.value, ISO_DATE_LIKE_PATTERN);
// Convert to ISO string (yyyy-mm-dd) and append time for start of day local
return temporalValue === null ? null : new Date(temporalValue + 'T00:00:00');
},
set: (newDate) => {
if (newDate != null) {
if (isMonthYear.value || isYearOnly.value) {
newDate.setDate(1);
}

if (isYearOnly.value) {
newDate.setMonth(0);
}
}
props.question.setValue(newDate);
},
});

// 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

@latin-panda latin-panda Apr 23, 2026

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

@garethbowen garethbowen Apr 23, 2026

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

@latin-panda latin-panda Apr 24, 2026

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

}

if (isYearOnly.value) {
return { view: 'year', dateFormat: 'yy', placeholder: 'yyyy' };
}

return {
view: 'date',
dateFormat: undefined, // Fallback to PrimeVue locale default
placeholder: localeDateFormat.value,
};
});

const isDisabled = computed(() => props.question.currentState.readonly === true);
</script>

<template>
<DatePicker
v-model="value"
:view="pickerConfig.view"
:date-format="pickerConfig.dateFormat"
show-icon
icon-display="input"
:placeholder="localeDateFormat"
:panel-class="isMonthYear || isYearOnly ? 'hide-today-button' : undefined"
Comment thread
latin-panda marked this conversation as resolved.
Outdated
:placeholder="pickerConfig.placeholder"
show-button-bar
:disabled="isDisabled"
/>
Expand Down