feat: date picker segments #2671
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| @@ -803,6 +810,138 @@ export function connect<T extends PropTypes>( | |||
| }) | |||
| }, | |||
|
|
|||
| getSegmentInputProps() { | |||
There was a problem hiding this comment.
You can pass the index as props here
| </output> | ||
|
|
||
| <div {...api.getControlProps()}> | ||
| <div {...api.getSegmentInputProps()}> |
There was a problem hiding this comment.
Let's rename this part to segmentGroup instead of segmentInput (since it's not technically an input)
| inputMode: | ||
| disabled || segment.type === "dayPeriod" || segment.type === "era" || !isEditable ? undefined : "numeric", | ||
| enterKeyHint: "next", | ||
| "aria-labelledby": dom.getInputId(scope, 0), // FIXIT: figure out the index |
There was a problem hiding this comment.
You can also pass the index from props. set the default to 0
| "data-editable": dataAttr(segment.isEditable && !readOnly && !disabled), | ||
| "data-placeholder": dataAttr(segment.isPlaceholder), | ||
| style: { | ||
| "caret-color": "transparent", |
There was a problem hiding this comment.
Should this be caretColor?
| ArrowLeft() { | ||
| send({ type: "SEGMENT.ARROW_LEFT", focus: true }) | ||
| }, | ||
| ArrowRight() { | ||
| send({ type: "SEGMENT.ARROW_RIGHT", focus: true }) | ||
| }, | ||
| ArrowUp() { | ||
| send({ type: "SEGMENT.ARROW_UP", segment, focus: true }) | ||
| }, | ||
| ArrowDown() { | ||
| send({ type: "SEGMENT.ARROW_DOWN", segment, focus: true }) | ||
| }, | ||
| PageUp(event) { | ||
| send({ type: "SEGMENT.PAGE_UP", larger: event.shiftKey, focus: true }) | ||
| }, | ||
| PageDown(event) { | ||
| send({ type: "SEGMENT.PAGE_DOWN", larger: event.shiftKey, focus: true }) | ||
| }, | ||
| Home() { | ||
| send({ type: "SEGMENT.HOME", focus: true }) | ||
| }, | ||
| End() { | ||
| send({ type: "SEGMENT.END", focus: true }) | ||
| }, |
There was a problem hiding this comment.
After you get this working, I wonder if we can bundle these into a SEGMENT.CYCLE or SEGMENT.INC/DEC event to reduce the repetition here and in the machine.
📝 Description
Implements date picker segments functionality to allow inline editing of date components (day, month, year, etc.) for improved user experience. This feature enables users to navigate between date segments using keyboard and edit individual parts of the date without opening the calendar popup.
⛳️ Current behaviour (updates)
Currently, the date picker only supports input through a single text field or calendar selection. Users cannot navigate between individual date components (segments) like day, month, year using keyboard navigation or edit them individually.
🚀 New behaviour
💣 Is this a breaking change (Yes/No): No
This is an additive feature that doesn't break existing functionality.
📝 Additional Information
TODO:
getSegmentInputProps)getSegments,getSegmentProps)processSegments)aria-labelledbyattribute for segmentsgetSegmentState