Inline
InlineDate
Click-to-edit date picker that saves a date field change via useXCrud.
Inline
The Inline category provides click-to-edit field components for detail views and data tables. Each component follows the same pattern: display mode (read-only with a subtle hover affordance) → edit mode → optimistic save via useXCrud → success/error indicator. All rollback on API failure.
Components
<XAInlineDate />
Displays a formatted date inline with a calendar icon. On click, opens a popover with a native <input type="date"> plus Clear/Cancel/Save buttons. Saves on the Save button click.
<XAInlineDate
v-model="task.dueDate"
field="dueDate"
endpoint="/api/tasks"
:entity-id="task.id"
placeholder="Set due date..."
:show-icon="true"
:date-format="{ dateStyle: 'medium' }"
@save="onDateSaved"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | String | Date | null | Current date value (v-model) |
field | String | required | Field name to update |
endpoint | String | required | API endpoint for useXCrud |
entityId | String | Number | required | Record ID |
placeholder | String | 'Select date...' | Placeholder shown when no date is set |
displayClass | String | '' | Additional CSS classes for the display span |
showIcon | Boolean | true | Show calendar icon in display mode |
dateFormat | Object | { dateStyle: 'medium' } | Intl.DateTimeFormat options for the display value |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | String | Date | Optimistic value update |
save | newValue, previousValue | Save succeeded |
error | Error | Save failed |
AI Context
component: XAInlineDate
package: "@xenterprises/nuxt-x-app"
category: Inline
auto-import: true
use-when: >
Detail pages where users should be able to set or change a date field
(due dates, deadlines, scheduled dates) without navigating to a separate
edit form.
key-patterns:
- Requires field, endpoint, and entityId props
- Uses useXCrud internally — no manual API call needed
- Performs optimistic updates and reverts on failure
- Use v-model to keep the parent state in sync
- Opens a popover with Clear/Cancel/Save buttons — does not auto-save on pick