DateInput Component

A split date input component with optional calendar (datepicker). It renders three numeric fields (DD, MM, YYYY) and emits a single controlled value in the YYYY-MM-DD format.

Important: onChange will emit an empty string ('') while the date is incomplete (missing day, month, or year). Once all parts are filled, it emits YYYY-MM-DD.

Installation

Use the package manager npm or yarn to install the component and its dependencies.

npm install @bolttech/frontend-foundations @bolttech/atoms-date-input

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-date-input

Peer dependencies

This component relies on these peer dependencies (usually resolved by the monorepo / workspace):

• @bolttech/ui-utils
• @bolttech/atoms-icon
• @bolttech/molecules-calendar

Props

The DateInput component accepts the following properties:

| Prop | Type | Default | Description | | ------------------ | ---------------------------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------- | | id | string | — | The id prefix used to generate internal element ids. | | dataTestId | string | — | The data-testid prefix for testing. | | variant | 'grey' \| 'border' | 'grey' | The variant of the component. | | label | string | — | A label to describe the input. | | required | boolean | false | Whether the inputs are required or not. | | disabled | boolean | false | Whether the component is disabled or not (also prevents opening the datepicker). | | value | string | — | The controlled value of the date in YYYY-MM-DD format. | | min | Date \| string | — | Minimum date (passed to Calendar). | | max | Date \| string | — | Maximum date (passed to Calendar). | | locale | string | — | Locale (passed to Calendar). | | cancel | string | — | Cancel button label (passed to Calendar). | | confirm | string | — | Confirm button label (passed to Calendar). | | showDatepicker | boolean | false | Shows the calendar icon and enables the datepicker. | | calendarYearOrder | 'asc' \| 'desc' | 'desc' | Year list order in the calendar. | | icon | string | — | Custom icon for the datepicker button. | | placeholder | string \| null | — | Placeholder text split by the separator into day/month/year parts. When not provided, no placeholder is shown.| | separator | '/' \| '-' | '/' | Separator character displayed between date fields and used to parse the placeholder. | | fieldOrder | 'DMY' \| 'YMD' \| 'YDM' | 'DMY' | Order of the date input fields. Auto-focus follows this order. | | helperMessage | string | — | Helper text displayed below the input (hidden when errorMessage is present). | | errorMessage | string | — | An error message displayed below the input. | | onChange | (evt: React.ChangeEvent<HTMLInputElement>) => void | — | Called on changes. Emits evt.target.value as YYYY-MM-DD or '' when incomplete. | | onBlur | (value: string) => void | — | Called on blur with a YYYY-MM-DD string (note: not a FocusEvent). |

The component also accepts all other props from InputProps (@bolttech/atoms-input) that are not listed above.

Usage

Basic usage

import React, { useState } from 'react';
import { DateInput } from '@bolttech/atoms-date-input';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

const ExampleComponent = () => {
  const [dateValue, setDateValue] = useState('');

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <DateInput
        id="date-input-id"
        dataTestId="custom-date-input"
        label="Date of Birth"
        variant="grey"
        value={dateValue}
        onChange={(e: any) => setDateValue(e.target.value)}
        showDatepicker={true}
        required={true}
      />
    </BolttechThemeProvider>
  );
};

Custom placeholder (i18n)

The placeholder prop accepts a format string split by the separator. Each segment maps to the corresponding field based on fieldOrder. When not provided, no placeholder is displayed.

{/* Portuguese — DD/MM/AAAA */}
<DateInput placeholder="DD/MM/AAAA" locale="pt-BR" label="Data de nascimento" />

{/* French — JJ/MM/AAAA */}
<DateInput placeholder="JJ/MM/AAAA" locale="fr-FR" label="Date de naissance" />

{/* No placeholder (default behavior) */}
<DateInput label="Date" />

Separator

Choose between / and - as the visual separator between fields:

<DateInput separator="-" placeholder="DD-MM-YYYY" label="Date" />

Field order

Control the order of the input fields. Useful for locales that use year-first formats:

{/* ISO format: Year / Month / Day */}
<DateInput fieldOrder="YMD" placeholder="YYYY/MM/DD" label="Date (ISO)" />

{/* ISO with dash separator */}
<DateInput fieldOrder="YMD" separator="-" placeholder="YYYY-MM-DD" label="Date" />

Note: Regardless of fieldOrder, the emitted value is always YYYY-MM-DD.

Helper message

Display a helper text below the input. It is automatically hidden when errorMessage is present:

<DateInput
  helperMessage="Formato: DD/MM/AAAA"
  label="Data de nascimento"
/>

With datepicker

<DateInput
  showDatepicker
  locale="pt-BR"
  min={new Date('1900-01-01')}
  max={new Date('2030-12-31')}
  cancel="Cancelar"
  confirm="Confirmar"
  label="Data"
/>

Contributing

Contributions are welcome! For any bug fixes, improvements, or new features, please open an issue or submit a pull request.

Please make sure to follow the code standards and test your changes before submitting.