@bolttech/molecules-date-picker

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

or

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