Modsen DatePicker

Сontent

• Functionality
• Installation
• Usage
• Using Tachnologies

Functionality:

• Viewing the calendar;
• Selecting a range for the calendar;
• Default calendar with a preset range;
• The ability to choose the beginning of the week (from Monday or Sunday);
• Select the type of calendar (by week, month, etc.);
• When you click on a certain day, the task list is added and saved in localStorage;
• The ability to switch to the previous(th)/next(th) week/month/year;
• The ability to select the maximum date of the calendar;
• The ability to select the minimum date for the calendar;
• The ability to hide/show weekends and highlight holidays in a different color;
• The ability to switch to the date entered by the user in the calendar;
• The ability to skip a certain date to set the date and vice versa, use the date entered by the user in the application;

Installation:

Before installing, download and install Node.js. Node.js 10 or higher is required.

If this is a brand new project, make sure to create a package.json first with the npm init command.

Installation is done using the npm install command: npm i @nikitos32/date-picker-library

Usage

DayCalendar

<DayCalendar
  withTodos={false}
  handleOnClickDateInputValue={handleOnClickDateInputValue}
  datePickerInputValue={startDateValue}
  startDate={startDateValue}
  endDate={endDateValue}
/>

| Props | Type | Description | | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | withTodos | boolean | allows you to control todos section | | startDate | string | allows you to pass string that will be the start day in a range | | endDate | string | allows you to pass string that will be the end day in a range | | handleOnClickDateInputValue | (date: string, inputId: string) => void) | allows you to set Day click handle | | shiftIndex | 1(from Sunday) or 2(from Monday) | allows you to handle from what day the week will start | | dayStyle | {dayColor: string, dayBackgroundColor: string} | allows you to handle day styling | | calendarWrapperStyle | { wrapperBackgroundColor?: string, wrapperBorderColor?: string, wrapperWidth?: string, wrapperHeight?: string} | allows you to handle calendar wrapper styling | | withMonth, withWeek, withYear, withHolidays | boolean | decide display section or not | | datePickerInputValue | string | provide default value to day calendar |

DatePicker

const [value, setValue] = useState("2024-12-09");

 const onChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

 const onClear = () => {
    setValue("");
  };

  const onClickDay = (date: string) => {
    setValue(date);
  };

<DatePicker
  value={value}
  onChange={onChange}
  onClear={onClear}
  onClickDay={onClickDay}
    />

| Props | Type | Description | | ---------- | --------------------------------------------------- | ----------------------------------------------------------------- | | value | string | provide a value to set controlled input | | onChange | (e: React.ChangeEvent<HTMLInputElement>) => void) | provide a onChange handler if you pass value value | | onClear | () => void | provide a onClear handler to controll clear functionality | | onClickDay | (date: string) => void | provide a onClickDay handler to controll dayClick functionality | | maxDate | string | pass max date for input | | minDate | string | pass min date for input |

RangePicker

<RangePicker
  minDate={minDate}
  maxDate={maxDate}
  startDate={startDateValue}
  endDate={endDateValue}
  shiftIndex={shiftIndex}
/>

| Props | Type | Description | | ---------- | ------------------------------- | ---------------------------------------- | | minDate | string | provide a value to set min date | | maxDate | string | provide a value to set max date | | startDate | string | provide a value to set start date | | endDate | string | provide a value to set end date | | shiftIndex | 1(from Sunday), 2(fromMonday) | decide from what day the week will start |

Using Technologies

• node.js - is a software platform based on the V8 engine (translating JavaScript into machine code);
• babel - a transpiler that converts code from one standard to another;
• eslint - linter for JavaScript code;
• prettier - a tool for auto-formatting code;
• husky - a modern solution for managing Git hooks;
• commitlint - is a tool that checks commit messages for compliance with generally accepted standards of their descriptions;
• yarn - package manager;
• rollup - ES module builder;
• storybook - is a tool used to develop user interface components in isolation;
• react - JavaScript library for creating user interfaces;
• typescript - strongly typed language to reduce the number of potential bugs;
• styled-components - react component styling system;
• jest - framework for unit testing;
• react testing library - is a library for integration testing.