DateTimeField

DateTimeField renders an <input type="datetime-local"> and emits the selected value as an ISO local datetime string. Optional minDateTime and maxDateTime props constrain the selectable range.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | Current value in YYYY-MM-DDTHH:mm (or full ISO) format. | | onChange | (value: string) => void | Yes | — | Called with the selected datetime string when the user changes the value. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | minDateTime | string | No | — | Minimum selectable datetime in YYYY-MM-DDTHH:mm format. | | maxDateTime | string | No | — | Maximum selectable datetime in YYYY-MM-DDTHH:mm format. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

import React, { useState } from 'react';
import DateTimeField from '@/components/fields/DateTimeField';

export default function Example() {
  const [dt, setDt] = useState('');

  return (
    <DateTimeField
      label="Scheduled at"
      value={dt}
      onChange={setDt}
    />
  );
}

With min and max constraints

<DateTimeField
  label="Meeting time"
  value={meetingTime}
  onChange={setMeetingTime}
  minDateTime="2024-06-01T08:00"
  maxDateTime="2024-06-30T18:00"
  description="Select a time in June 2024 between 8 AM and 6 PM."
/>