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 | Description | | -------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------ | | id | string | The id prefix used to generate internal element ids. | | dataTestId | string | The data-testid prefix for testing. | | variant | string | The variant of the component (default is 'grey'). | | label | string | A label to describe the input. | | required | boolean | Whether the inputs are required or not. | | disabled | boolean | 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 | unknown | Minimum date (passed to Calendar). | | max | unknown | 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 | Shows the calendar icon and enables the datepicker. | | errorMessage | string | An error message to be displayed. | | 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). |

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('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    /**
     * While the date is incomplete, e.target.value === ''
     * Once day+month+year are filled, e.target.value === 'YYYY-MM-DD'
     */
    setDateValue(e.target.value);
  };

  const handleBlur = (value: string) => {
    // value is a string, e.g. '2026-02-26'
    console.log('blur:', value);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <DateInput id="date-input-id" dataTestId="custom-date-input" label="Date of Birth" variant="grey" value={dateValue} onChange={handleChange} onBlur={handleBlur} showDatepicker={true} required={true} />
    </BolttechThemeProvider>
  );
};

export default ExampleComponent;

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.