DatePicker and RangePicker library

Demo

Example of usage Date and Range Picker: Booking form.

Storybook

Features

• Default Calendar: A default calendar with month display.
• Single Date Selection: Select a date with a user-friendly interface.
• Date Range Selection: Select a date range for the calendar.
• Week Start Selection: Choose the starting day of the week (Monday or Sunday).
• Calendar View Types: Switch between different calendar views (weeks, months).
• Task Management: Double click on a specific day to add a list of tasks and save them in localStorage.
• Navigation: Navigate to the previous/next week/month/year.
• Date Constraints: Set a maximum and minimum date for the calendar.
• Weekend Visibility: Show/hide weekend days and highlight holidays with a different color.
• Date Navigation: Jump to a user-specified date in the calendar.
• Date Propagation: Pass a specific date to set the calendar date and vice versa, allowing users to use the date they input in the application.
• Calendar Styling: Customize the appearance of the calendar by selecting accent color.

Installation

The package can be installed via npm:

npm install @pkostukevich/modsen-date-picker

Or via yarn:

yarn add @pkostukevich/modsen-date-picker

Configuration

This library provides DatePicker and RangePicker components. The most basic use of the DatePicker with default props can be described with:

<DatePicker />

Use minDate, maxDate in format dd/mm/yyyy to set calendar limits:

<DatePicker minDate={minDate} maxDate={maxDate} />

Include input (true/false) prop to select date with input:

<DatePicker input={true} />

Highlight weekends with weekends(true/false) prop:

<DatePicker weekends={true} />

You can pass an array of holidays to holidays prop:

interface IHoliday {
  name: string;
  date: {
    day: number;
    month: number;
  };
}
const holidays: IHolidays[] = [
{
    date: {
      day: 1,
      month: 0
    },
    name: 'New Year'
  },
  ...
]
<DatePicker holidays={holidays} />

You can pass color in HEX format to set custom accent color color prop:

<DatePicker color="#FFFFFF" />

Set start week day by passing startWeekDay prop

<DatePicker startWeekday={0} /> // week starts from Sunday (by default)
<DatePicker startWeekday={1} /> // week starts from Monday

Set calendar period view by setting period prop

<DatePicker period="month" /> // 42 days displayed (by default)
<DatePicker period="week" /> // 7 days displayed

You can add a task list to each day and call it by double click:

<DatePicker tasks={true} />

RangePicker is available by using RangePicker component

<RangePicker />

RangePicker supports weekends, holidays, input in format From/To and changing theme color.