EditableDateTimeField

EditableDateTimeField combines date and time selection in a single inline-editable field. In read mode the current ISO datetime string is displayed in a disabled input. Clicking the edit icon activates a datetime-local picker. Supports optional min/max bounds. On save the ISO datetime string is persisted via API.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | string | No | — | Current datetime in ISO format (e.g. "2024-06-15T14:30"). | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown above the input. | | description | string | No | — | Helper text shown below the label. | | minDateTime | string | No | — | Minimum selectable datetime (YYYY-MM-DDTHH:mm). | | maxDateTime | string | No | — | Maximum selectable datetime (YYYY-MM-DDTHH:mm). | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Called after successful save. | | onEditError | (error: any) => void | No | — | Called on API error; value is reverted. | | onEditCancel | () => void | No | — | Called when the user cancels; value is reverted. | | editIcon | string | No | "pencil" | Icon name for the edit button. | | saveIcon | string | No | "check" | Icon name for the save button. | | cancelIcon | string | No | "close" | Icon name for the cancel button. | | containerStyle | React.CSSProperties | No | — | Style for the outermost wrapper. | | inputStyle | React.CSSProperties | No | — | Style for the <input> element. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description <p> element. |

Usage

Basic

import React, { useState } from 'react';
import EditableDateTimeField from '@/components/editable-fields/EditableDateTimeField';

export default function Example() {
  const [scheduledAt, setScheduledAt] = useState('2024-09-01T09:00');

  return (
    <EditableDateTimeField
      label="Scheduled At"
      name="scheduled_at"
      value={scheduledAt}
      updatePath="/v1/events/15"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setScheduledAt(updated)}
    />
  );
}

With constraints

<EditableDateTimeField
  label="Meeting Time"
  name="meeting_at"
  value={meetingAt}
  minDateTime="2024-01-01T08:00"
  maxDateTime="2024-12-31T20:00"
  updatePath="/v1/meetings/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setMeetingAt(updated)}
/>