DatePicker Library Documentation

Installation

• npm install date-picker-drm-modsen
• yarn add date-picker-drm-modsen

Quick Start

import { CalendarContextProviders, Calendar } from '@modsen/datepicker-library';

  
function App() {

return (

<CalendarContextProviders

weekendColor="#FFA500"

minDate={new  Date(2023,  0,  1)}

maxDate={new  Date(2030,  11,  31)}

>

<Calendar

enableWeekends

enableTodos

isMondayFirst

enablePublicHolidays

/>

</CalendarContextProviders>

);

}

Core Components

1. CalendarContextProviders

Wrapper component providing global configuration:

• weekendColor: Custom weekend color (default: orange)

• currentDate: Initial active date (default: current date)

• minDate: Minimum selectable date (default: 2025-01-01)

• maxDate: Maximum selectable date (default: 2029-01-01)

• customHolidays: Array of custom holiday objects ({ date, name })

• displayType: View mode (Month/Week/Year)

2. Calendar

Main calendar component with decorator pattern:

• enableWeekends: Show weekends (Saturdays and Sundays)

• enableTodos: Enable task management (Double click on day)

• enableRange: Allow date range selection

• enablePublicHolidays: Show holidays

• isMondayFirst: Start week on Monday

• isDateInputEnabled: Show date input field

3. RangePicker

Date range selection component:

<RangePicker />

4. DatePicker

Single date picker component:

<DatePicker  label="Select date" />

Hooks

useCalendarConfig

Access calendar configuration and state:

- activeDate

- setActiveDate

- minDate

- maxDate

- weekendColor

- displayType

- setDisplayType

useDateRange

Manage date range selection:

- startDate

- endDate

- interval

- setInterval

Customization

Default Values

- CALENDAR_DEFAULT_MIN_DATE: 2025-01-01

- CALENDAR_DEFAULT_MAX_DATE: 2029-01-01

- Week starts on Sunday by default

Display Options

enum CALENDAR_DISPLAY_OPTIONS {

Week = 1,

Month = 2,

Year = 3

}

Key Features

1. Date Range Selection

2. Task Management (double-click dates)

3. Holiday Support (built-in + custom)

4. Localization (Position based)

5. Date Validation (min/max dates)

6. Date selection/manipulations and etc.

7. Change Calendar type displaying clicking on top

Advanced Usage

Custom Holidays Example

<CalendarContextProviders

customHolidays={[

{  date:  new  Date(2024,  6,  4),  name:  "Independence  Day"  }

]}

>

<Calendar  enablePublicHolidays />

</CalendarContextProviders>

Date Range Handling

const MyComponent = () => {

const { interval } = useDateRange();

useEffect(() => {

if (interval?.start && interval?.end) {

console.log('Selected range:', interval);

}

}, [interval]);

return <RangePicker />;

}

Testing Example

import { render } from '@testing-library/react';

import { Calendar } from '@modsen/datepicker-library';

  

test('renders calendar', () => {

const { getByTestId } = render(

<CalendarContextProviders>

<Calendar />

</CalendarContextProviders>

);

expect(getByTestId('calendar-component')).toBeInTheDocument();

});

License

MIT License