Your details: the date-of-birth calendar button beside the boxes, and a picker redesigned

tiagoagueda commented

2026-10-15 17:19:48 +00:00

Owner

On Your details, the date-of-birth calendar button sits to the right of the day, month and year boxes, on their line, and never wraps below them. The picker it opens is redesigned.

What exists today

templates/accounts/profile.html, Personal details: a <fieldset> "Date of birth" holds <div class="flex flex-wrap items-start gap-x-4">, the three boxes (form.birth_boxes, each field mb-2 w-20), then <div class="field mb-2 self-end"> with the button (data-birth-picker, popovertarget="birth-picker", icon calendar-days, hidden until app.js runs) (#863).
The row wraps (flex-wrap). Whenever the three boxes, their gaps and the button do not fit, the button drops to a line of its own under the boxes.
The picker is <div id="birth-picker" popover data-popover data-align="start" class="w-72">. Inside are a label "Pick a day", the browser's own <input type="date"> (min="1900-01-01", max today) and a sentence ("It fills the day, month and year boxes. …"). So what is drawn is a box inside a popover, and the browser's own calendar opens from that box. This was chosen with the calendar's period picker (#858) "so no library is vendored for either". Each browser draws it differently and none follows Postulo's look.

What would change

Placement

The three boxes and the button stay on one line at every width: no flex-wrap on that row, or the button attached to the year box as an input-group addon. The button is level with the boxes, not with their labels (#866 handled the same for the star and the bin).
At 320px, all four have to fit. Check the widest language's labels in the reflow walk.

The picker (options, not decided)

A calendar grid of Postulo's own in the popover: month and year selects (a birth date is decades back, so paging month by month is no use), and a grid of days drawn as buttons. It is shared with the calendar's period picker (#858) so the two stay one component (<c-date-picker>). Basecoat 1.0.2 has no date picker to import, so it is written here and painted in basecoat.css.
Vendor a small, accessible date picker library, and record its licence in THIRD-PARTY.md.
Drop the popover and put a native <input type="date"> beside the boxes. The browser's calendar opens straight away, but its look still varies.

Whichever is chosen: it fills the three boxes and never replaces them (a year alone stays possible by typing), it opens on the date already in the boxes, and it says what it does in one sentence.

Accessibility

The button keeps its name ("Choose the date of birth from a calendar"). A custom grid follows the ARIA date-picker dialog pattern: arrow keys move by day and week, Page Up/Down by month, Home/End within a week, Enter chooses, Escape closes and returns focus to the button, today and the chosen day are announced, and every target is 24px or larger.

Notes

New labels (month, year, previous and next) are new strings for the catalogues and Weblate. Month and weekday names come from the locale, not from the catalogues.

Related: #863, #858, #679.

Checked against main at 56fc9d531.

On *Your details*, the date-of-birth calendar button sits to the right of the day, month and year boxes, on their line, and never wraps below them. The picker it opens is redesigned. ## What exists today - `templates/accounts/profile.html`, *Personal details*: a `<fieldset>` "Date of birth" holds `<div class="flex flex-wrap items-start gap-x-4">`, the three boxes (`form.birth_boxes`, each `field mb-2 w-20`), then `<div class="field mb-2 self-end">` with the button (`data-birth-picker`, `popovertarget="birth-picker"`, icon `calendar-days`, hidden until `app.js` runs) (#863). - The row wraps (`flex-wrap`). Whenever the three boxes, their gaps and the button do not fit, the button drops to a line of its own under the boxes. - The picker is `<div id="birth-picker" popover data-popover data-align="start" class="w-72">`. Inside are a label "Pick a day", the **browser's own `<input type="date">`** (`min="1900-01-01"`, `max` today) and a sentence ("It fills the day, month and year boxes. …"). So what is drawn is a box inside a popover, and the browser's own calendar opens from that box. This was chosen with the calendar's period picker (#858) "so no library is vendored for either". Each browser draws it differently and none follows Postulo's look. ## What would change **Placement** - The three boxes and the button stay on one line at every width: no `flex-wrap` on that row, or the button attached to the year box as an `input-group` addon. The button is level with the boxes, not with their labels (#866 handled the same for the star and the bin). - At 320px, all four have to fit. Check the widest language's labels in the reflow walk. **The picker** (options, not decided) 1. **A calendar grid of Postulo's own** in the popover: month and year selects (a birth date is decades back, so paging month by month is no use), and a grid of days drawn as buttons. It is shared with the calendar's period picker (#858) so the two stay one component (`<c-date-picker>`). Basecoat 1.0.2 has no date picker to import, so it is written here and painted in `basecoat.css`. 2. **Vendor a small, accessible date picker library**, and record its licence in `THIRD-PARTY.md`. 3. **Drop the popover** and put a native `<input type="date">` beside the boxes. The browser's calendar opens straight away, but its look still varies. Whichever is chosen: it fills the three boxes and never replaces them (a year alone stays possible by typing), it opens on the date already in the boxes, and it says what it does in one sentence. ## Accessibility - The button keeps its name ("Choose the date of birth from a calendar"). A custom grid follows the ARIA date-picker dialog pattern: arrow keys move by day and week, Page Up/Down by month, Home/End within a week, Enter chooses, Escape closes and returns focus to the button, today and the chosen day are announced, and every target is 24px or larger. ## Notes - New labels (month, year, previous and next) are new strings for the catalogues and Weblate. Month and weekday names come from the locale, not from the catalogues. Related: #863, #858, #679. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-15 17:19:49 +00:00

tiagoagueda referenced this issue

2026-10-16 13:15:07 +00:00

Date pickers: a month, week, day and range picker for the calendar's views, then for every date in the app #933

tiagoagueda commented

2026-10-16 13:15:14 +00:00

Author

Owner

The new picker for the date of birth should be the shared one from #933 (date, month, week and range pickers built once for the calendar and every date field).

tiagoagueda referenced this issue from a commit

2026-10-18 18:04:25 +00:00

Your details: the birth calendar beside the boxes on one line, and a calendar of our own

tiagoagueda referenced this issue from a pull request that will close it,

2026-10-18 18:04:35 +00:00

Your details: twelve fixes and additions (#919–#932) #1005

tiagoagueda referenced this issue from a commit

2026-10-18 20:11:30 +00:00

Your details: the birth calendar beside the boxes on one line, and a calendar of our own

tiagoagueda referenced this issue from a commit

2026-10-18 20:11:31 +00:00

Your details: the select tests follow the new marks and the native calendar selects