@bolttech/molecules-date-picker NPM

Date Picker Component

The Date Picker component is a React component that provides an input field with an attached calendar for selecting dates.

Installation

To use the Date Picker component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-datepicker

yarn add @bolttech/frontend-foundations @bolttech/molecules-datepicker

Usage

You can utilize the Date Picker component by importing it and including it in your JSX. Here's an example:

import React from 'react';
import { DatePicker } from '@bolttech/molecules-datepicker';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations'; // Adjust the path to your component

function App() {
  const handleDateChange = (date) => {
    console.log('Selected date:', date);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <DatePicker label="Select a date" placeholder="Pick a date" value="2023-08-25" onChange={handleDateChange} />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Date Picker component accepts the following props:

Prop	Type	Description
`id`	`string`	Component identification.
`dataTestId`	`string`	The data-testid attribute for testing purposes.
`locale`	`string`	Locale for displaying the date. Defaults to `'en'`.
`showOtherMonthsDays`	boolean	Boolean representing if the calendar should display the days of the previous and next month on empty slots
`min`	`string`	Minimum date that can be selected.
`max`	`string`	Maximum date that can be selected.
`cancel`	`string`	Text for the "Cancel" button in the calendar. Defaults to `'Cancel'`.
`confirm`	`string`	Text for the "Confirm" button in the calendar. Defaults to `'Confirm'`.
`label`	`string`	Label for the input field.
`placeholder`	`string`	Placeholder text for the input field.
`value`	`string`	Currently selected date value.
`format`	`string`	Format for displaying the date in the input field.
`variant`	`string`	Variant of the input field.
`errorMessage`	`string`	Error message to display when there's an error with the input.
`disabled`	`boolean`	Whether the input is disabled or not.
`required`	`boolean`	Whether the input is required or not.
`onFocus`	`function`	Callback function triggered when the input is focused.
`onBlur`	`function`	Callback function triggered when the input loses focus.
`onChange`	`function`	Callback function triggered when the date value changes.
`helperMessage`	`string`	An optional string to display as a helper message for the datepicker

Functionality

The Date Picker component provides the following functionality:

Date Selection: Allows the user to pick a date using an attached calendar.
Input Interaction: The input field can be focused, blurred, and read-only.
Accessibility: Proper accessibility structure is maintained for interacting with the date picker.

Contribution

Contributions to the Date Picker component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository