Skip to content

fix(date-field): show PM times correctly in 12-hour display #586

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
interacsean merged 1 commit into from
Oct 9, 2026
Merged

fix(date-field): show PM times correctly in 12-hour display #586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .changeset/date-field-12-hour-pm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@tailor-platform/app-shell": patch
---

Fix 12-hour time display in `DateField`, `DatePicker` and `DateRangePicker`. With `granularity` set to `hour`, `minute` or `second` and a 12-hour cycle (`hourCycle={12}`, or a 12-hour locale such as `en-US`), afternoon values showed as e.g. "18:00 AM", and editing any segment saved them 12 hours early (06:xx). PM values now show as "06:00 PM", midnight and noon as 12 AM / 12 PM, and edits keep the correct hour. Changing `hourCycle` (or a locale change that flips the default cycle) on a mounted field now re-encodes the time segments instead of misreading them. Refs tailor-inc/platform-planning#2039.
6 changes: 3 additions & 3 deletions docs-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,9 +468,9 @@
],
"hashes": {
"typeSurface": "6b07d4169fa991df",
"outline": "85b4b50ff4dbc265",
"outline": "caab56e5766bdb72",
"snapshot": null,
"outputMd": "33902be121ff69db",
"outputMd": "f39002ad79625dc4",
"examples": null
}
},
Expand Down Expand Up @@ -1674,7 +1674,7 @@
"packages/core/skills/app-shell-patterns/references/components/command-palette.md": "7e5bc675a593791a",
"packages/core/skills/app-shell-patterns/references/components/csv-importer.md": "53d3c795ca21b9dc",
"packages/core/skills/app-shell-patterns/references/components/data-table.md": "dd2da884d7550daf",
"packages/core/skills/app-shell-patterns/references/components/date-picker.md": "33902be121ff69db",
"packages/core/skills/app-shell-patterns/references/components/date-picker.md": "f39002ad79625dc4",
"packages/core/skills/app-shell-patterns/references/components/default-header.md": "375e55f4b12fa2be",
"packages/core/skills/app-shell-patterns/references/components/default-sidebar.md": "3422388a0cc78571",
"packages/core/skills/app-shell-patterns/references/components/description-card.md": "a347fd1f4ccd433e",
Expand Down
44 changes: 23 additions & 21 deletions docs-src/components/date-picker.docs.outline.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,26 +193,28 @@ Locale and timezone come from AppShell automatically. Override per field with `l

### DateFieldProps

| Prop | Type | Description |
| -------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------- |
| `value` / `defaultValue` | `DateValue \| null` | Controlled / uncontrolled value |
| `onChange` | `(v: DateValue \| null) => void` | Fires when the value changes |
| `onBlur` | `() => void` | Fires when focus leaves the whole segmented control |
| `minValue` / `maxValue` | `DateValue` | Inclusive date range bounds |
| `isDateUnavailable` | `(date: DateValue) => boolean` | Marks specific dates unavailable |
| `isDisabled` | `boolean` | Disables interaction and form submission |
| `isReadOnly` | `boolean` | Allows focus/navigation without editing |
| `isRequired` | `boolean` | Marks the control required |
| `isInvalid` | `boolean` | Adds invalid styling / `aria-invalid` to the segmented UI |
| `placeholderValue` | `DateValue` | Seeds unset segments |
| `autoFocus` | `boolean` | Focus the first segment on mount |
| `locale` | `string` | BCP-47 locale override |
| `name` | `string` | Emits a form value through the proxy input |
| `id` | `string` | Proxy input id (use with external `<label htmlFor>`). |
| `firstDayOfWeek` | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` | Override the locale week start used by `w` / `k` shortcuts |
| `aria-label` / `aria-labelledby` | `string` | Accessible name |
| `aria-describedby` | `string` | IDs of description / error elements |
| `className` | `string` | Root element class |
| Prop | Type | Description |
| -------------------------------- | ------------------------------------------------------------- | ------------------------------------------------------------ |
| `value` / `defaultValue` | `DateValue \| null` | Controlled / uncontrolled value |
| `onChange` | `(v: DateValue \| null) => void` | Fires when the value changes |
| `onBlur` | `() => void` | Fires when focus leaves the whole segmented control |
| `minValue` / `maxValue` | `DateValue` | Inclusive date range bounds |
| `isDateUnavailable` | `(date: DateValue) => boolean` | Marks specific dates unavailable |
| `isDisabled` | `boolean` | Disables interaction and form submission |
| `isReadOnly` | `boolean` | Allows focus/navigation without editing |
| `isRequired` | `boolean` | Marks the control required |
| `isInvalid` | `boolean` | Adds invalid styling / `aria-invalid` to the segmented UI |
| `placeholderValue` | `DateValue` | Seeds unset segments |
| `granularity` | `"day" \| "hour" \| "minute" \| "second"` | Smallest editable unit; time granularities add time segments |
| `hourCycle` | `12 \| 24` | Force 12- or 24-hour time; defaults to the locale |
| `autoFocus` | `boolean` | Focus the first segment on mount |
| `locale` | `string` | BCP-47 locale override |
| `name` | `string` | Emits a form value through the proxy input |
| `id` | `string` | Proxy input id (use with external `<label htmlFor>`). |
| `firstDayOfWeek` | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` | Override the locale week start used by `w` / `k` shortcuts |
| `aria-label` / `aria-labelledby` | `string` | Accessible name |
| `aria-describedby` | `string` | IDs of description / error elements |
| `className` | `string` | Root element class |

### DatePickerProps

Expand All @@ -229,7 +231,7 @@ See the calendar docs in-code: controlled/uncontrolled value, min/max, unavailab

### DateRangePickerProps

The `DatePickerProps` surface (labeling, `isInvalid`, `min/maxValue`, `isDateUnavailable`, `granularity`, `firstDayOfWeek`, `timeZone`, `locale`, `autoFocus`, `isDisabled/ReadOnly/Required`), with the range-specific differences:
The `DatePickerProps` surface (labeling, `isInvalid`, `min/maxValue`, `isDateUnavailable`, `granularity`, `hourCycle`, `firstDayOfWeek`, `timeZone`, `locale`, `autoFocus`, `isDisabled/ReadOnly/Required`), with the range-specific differences:

| Prop | Type | Description |
| ------------------------ | -------------------------------- | ------------------------------------------------------------------------------- |
Expand Down
44 changes: 23 additions & 21 deletions docs/components/date-picker.md
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading
Loading