@vladislav_sss/modsen_date_picker

Description

Basic and extensible Javascript Date Picker library for working with different types of calendars. Includes DayPicker and RangePicker components.

• Supports the ability to jump to a user-specified date in the calendar.
• Supports the ability to add a list of tasks when double-clicking on a specific day and save them in localStorage.
• Supports the ability to switch to the previous/next week/month/year.
• Supports the ability to select minimum and maximum calendar dates.
• The ability to hide/show weekends and highlight holidays in a different color is supported.
• Supports selection of calendar type (by year, week and month).
• Supports range selection for the calendar.
• In the RangePicker component, the first calendar provides start date selection both when you click and when you enter data in the DateSelector component's panel. Similarly for the end date of the period in the second calendar. This provides the user with more convenient functionality for viewing the selected period and changing it. This library is extensible, so in the future the resulting range can be used for specific purposes of a particular application.

Overview

• Storybook overview

Installation

npm i @vladislav_sss/modsen_date_picker

yarn add @vladislav_sss/modsen_date_picker

Components:

<RangePicker />
<DayPicker />

Props DayPicker:

  form: 'year' | 'month' | 'week';
  title: string;
  isWeekendsOn: boolean;
  isWeekStartsOnMonday: boolean;
  isClearButtonVisible: boolean;
  holidaysColor: string;
  minDate: Date;
  maxDate: Date;

Props RangePicker:

  form: 'year' | 'month' | 'week';
  isWeekendsOn: boolean;
  isWeekStartsOnMonday: boolean;
  isClearButtonVisible: boolean;
  holidaysColor: string;
  minDate: Date;
  maxDate: Date;
  isRangeCalendarOpen: boolean;
  rangeStartDate: Date;
  rangeEndDate: Date;
  defaultRangeDate: Date;