DateInput Component (ob)

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

This is the Tailwind CSS / CSS variables version of the component, migrated from @bolttech/atoms-date-input (styled-components) to the ob/ architecture.

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

npm install @bolttech/molecules-date-input/ob

or

yarn add @bolttech/molecules-date-input/ob

Peer dependencies

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

Props

| Prop | Type | Default | Description | | ------------------ | --------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------ | | id | string | 'date-of-birth-input-id' | The id prefix used to generate internal element ids. | | dataTestId | string | 'date-of-birth-input-test-id' | The data-testid prefix for testing. | | variant | 'grey' \| 'border' | 'grey' | Visual variant of the component. | | label | string | — | A label to describe the input. | | required | boolean | — | Whether the inputs are required. | | disabled | boolean | — | Whether the component is disabled (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). | | calendarYearOrder | 'asc' \| 'desc' | 'desc' | Year order in the calendar dropdown. | | icon | string | — | Icon name for the calendar button. | | 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 — triggers error state when set. | | onChange | (evt: { target: { value: string } }) => void| — | Called on changes. Emits YYYY-MM-DD or '' when incomplete. | | onBlur | (value: string) => void | — | Called on blur with a YYYY-MM-DD string. |

Usage

import React, { useState } from 'react';
import { DateInput } from '@bolttech/molecules-date-input/ob';

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

  return (
    <DateInput
      id="date-input-id"
      dataTestId="custom-date-input"
      label="Date of Birth"
      variant="grey"
      value={dateValue}
      onChange={(e) => setDateValue(e.target.value)}
      onBlur={(value) => console.log('blur:', value)}
      showDatepicker
      required
    />
  );
};

export default ExampleComponent;

Variants

Grey (default)

Filled background with no visible border in the default state. Border appears on focus and error states.

Border

White background with a subtle border in all states.

Differences from the styled-components version

• Uses Tailwind CSS with @reference and CSS variables (--input-* tokens) instead of styled-components and theme.components.input.
• Uses classnames for conditional class application instead of transient props ($variant, $hasError).
• Interface defined in date-input.interface.ts instead of extending InputProps from @bolttech/atoms-input.
• No dependency on styled-components or BolttechThemeProvider.

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.