Date picker
Pick a date on the shop working calendar, with off days and rule floors shown.
Quick usage
Import the shared component; never copy its markup into a feature. The Web TSX tab beside the live stage has a complete, working example.
import WorkdayDatePicker from '@/shared/components/WorkdayDatePicker';Live stage and code
The live component and its controls on the left, the code on the right; change a control and the code follows: Web TSX (the component in a working example), Tailwind and HTML (the markup it renders, with its data attributes), React Native, SwiftUI and Jetpack Compose. The header theme switch drives every stage.
Props
Read from the component's source when the docs build: names and defaults from its signature, types and descriptions from its JSDoc. A blank type means the prop has no JSDoc yet.
| Prop | Type | Default | Description |
|---|---|---|---|
value | - | - | - |
onChange | - | - | - |
disabled | - | false | - |
placeholder | - | 'Pick date' | - |
allowOffDays | - | false | - |
pastOnly | - | false | - |
minDate | - | null | - |
minReason | - | null | - |
hardMinDate | - | null | - |
hardMinReason | - | null | - |
maxDate | - | null | - |
compact | - | false | - |
ruleGlyph | - | null | - |
ruleTinted | - | false | - |
triggerTitle | - | null | - |
autoOpen | - | false | - |
workStreamId | - | null | - |
withTime | - | false | - |
fullWidth | - | false | - |
id | - | undefined | - |
ariaLabel | - | undefined | - |
Source: frontend/src/shared/components/WorkdayDatePicker/WorkdayDatePicker.js
DOM contract
What the rendered element carries: the data attributes its styles key on, its roles and ARIA, its focus style, and whether its stylesheet draws the 44px hit boundary. Also read from the source.
| Data attributes | data-dsdata-workday-picker |
| Roles | role="dialog"role="group" |
| ARIA | aria-expandedaria-haspopuparia-labelaria-pressed |
| Focus | Styles :focus-visible in its own stylesheet |
| 44px hit boundary | Yes: a ::after in WorkdayDatePicker.module.css |
Accessibility and touch
The trigger is a 32px field; calendar days are 44px targets.
Visible height 28px. The ::after boundary adds 8px above and below, so a gloved finger lands on a 44px target while the row keeps its density.
Rules and constraints
Use it for
- Deadlines, task dates, delivery and receipt dates.
Avoid
- Never a native date input on a design-system surface.
Constraints
- A square 32px field with a right-aligned CalendarBlank (16px).