DatePicker and RangePicker Components

Overview

This package provides two main components: DatePicker and RangePicker, along with higher-order components (withHolidays and withTasks) to extend their functionality. These components are highly customizable and suited for applications that require robust date-selection features.

Components

DatePicker

A single-date picker component with various features and customization options.

Props:

• weekstartType

  • Type: WeekstartType
  • Description: Specifies the starting day of the week (e.g., "Monday" or "Sunday").

• withWeekends

  • Type: boolean
  • Description: Indicates whether weekends should be displayed in the picker.

• min

  • Type: Date
  • Description: The earliest selectable date.

• max

  • Type: Date
  • Description: The latest selectable date.

• onChange

  • Type: (date: Date) => void
  • Description: Callback triggered when the user selects a new date.

RangePicker

A component for selecting a range of dates.

Props:

• onFromChange

  • Type: (date: Date) => void
  • Description: Callback triggered when the "start date" of the range changes.

• onToChange

  • Type: (date: Date) => void
  • Description: Callback triggered when the "end date" of the range changes.

• min

  • Type: Date
  • Description: The earliest selectable date.

• max

  • Type: Date
  • Description: The latest selectable date.

Higher-Order Components (HOCs)

withHolidays

This HOC injects holiday-related functionality into a DatePicker.

Parameters:

• holidays
  • Type: Date[]
  • Description: An array of dates marked as holidays.

Usage:

const HolidayDatePicker = withHolidays(holidays)(DatePicker);
<HolidayDatePicker {...props} />;

withTasks

The useTask Higher-Order Component (HOC) enhances your DatePicker components by seamlessly integrating task-related functionality. This HOC wraps the DatePicker and provides the ability to display or handle tasks associated with specific dates, making it ideal for productivity tools, calendars, and scheduling applications.

Usage:

const TaskEnhancedDatePicker = withTasks(DatePicker);
<TaskEnhancedDatePicker {...props} />;