ReadOnlyDateTimeField

ReadOnlyDateTimeField renders a combined date and time value as non-editable output. It formats the value for human readability, typically showing both the date and the time portion. Used in detail and view screens for timestamps such as creation dates, appointment times, or event schedules.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | ISO datetime string (e.g. "2024-06-15T14:30:00"). Displays "-" when absent. | | label | string | No | — | Label shown above the field. | | description | string | No | — | Helper text shown below the field in italic. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

import ReadOnlyDateTimeField from '@/components/read-only-fields/ReadOnlyDateTimeField';

<ReadOnlyDateTimeField
  label="Created At"
  value="2024-06-15T14:30:00"
/>

Without a value

<ReadOnlyDateTimeField
  label="Last Updated"
  value={undefined}
/>
// Renders: -

With description

<ReadOnlyDateTimeField
  label="Appointment"
  value={appointment.scheduledAt}
  description="Date and time of the scheduled appointment."
/>