DateField

DateField renders an <input type="date"> wrapped in a styled container. It accepts and emits dates as ISO strings in YYYY-MM-DD format. Optional minDate and maxDate props constrain the selectable range.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | No | — | Current date value in YYYY-MM-DD format. | | onChange | (value: string) => void | Yes | — | Called with the new date string when the user changes the date. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | minDate | string | No | — | Minimum selectable date in YYYY-MM-DD format. | | maxDate | string | No | — | Maximum selectable date in YYYY-MM-DD format. | | placeholder | string | No | — | Placeholder text for the input. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputWrapperStyle | React.CSSProperties | No | — | Styles applied to the inner wrapper div that surrounds the <input>. | | 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 wrapper div. | | id | string | No | — | id attribute on the wrapper div. |

Usage

Basic

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

export default function Example() {
  const [date, setDate] = useState('');

  return (
    <DateField
      label="Date of birth"
      value={date}
      onChange={setDate}
    />
  );
}

With min and max date

<DateField
  label="Appointment date"
  value={appointmentDate}
  onChange={setAppointmentDate}
  minDate="2024-01-01"
  maxDate="2024-12-31"
  description="Select a date within 2024."
/>