DatePicker Component

The DatePicker is a customizable React component that allows users to select a date from a calendar interface. It's built with TypeScript and styled-components for type safety and easy styling.

Features

• Clean and modern design
• Month and year navigation
• Year selection dropdown
• Styled with styled-components for easy customization
• TypeScript support for improved developer experience

Installation

To use the DatePicker component in your React application, install it via npm:

npm install @droid/react-datepicker

Usage

To use the DatePicker component, import it and provide the required props:

import React, { useState } from 'react';
import DatePicker from '@droid/react-datepicker';

const MyComponent = () => {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);

  const handleDateChange = (date: Date) => {
    setSelectedDate(date);
  };

  return (
    <DatePicker
      label="Select a date"
      value={selectedDate}
      onChange={handleDateChange}
    />
  );
};

Props

The DatePicker component accepts the following props:

| Prop | Type | Required | Default | Description | |------------|-----------------------|----------|---------|----------------------------------------------------| | label | string | Yes | - | The label to display when no date is selected | | value | Date \| undefined | No | - | The currently selected date | | onChange | (date: Date) => void| Yes | - | Callback function called when a date is selected |

Customization

The DatePicker component uses styled-components, which allows for easy customization. You can override the default styles by wrapping the DatePicker component with a styled-components theme provider or by creating new styled components based on the existing ones.

To customize the styles, you can create your own version of the DatePicker.styles.ts file and import your custom styled components instead of the default ones.

Accessibility

The DatePicker component is designed with accessibility in mind:

• The input field is keyboard-accessible and can be focused with the Tab key.
• The calendar can be navigated using keyboard arrow keys.
• ARIA attributes are used to improve screen reader compatibility.

Browser Support

The DatePicker component is compatible with modern browsers that support ES6 and CSS3. It has been tested on:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is licensed under the MIT License.