Datepicker

The Datepicker UI-library consists of 3 different components: DatePicker, RangePicker and TodoPicker

The DatePicker components allows users to select any date from a calendar. It gives an ability to choose an option to highlight holidays or weekends with different colors. User can navigate between months and years using windows-like calendar interface to select a date. DatePicker also provides min and max date property, that a user can choose, so they cannot surpass the range of dates that they set.

The TodoPicker component is an extension to the DatePicker component that has a feature of writing todo-tasks for any selected date and save them even after browser closes. This allows users to store their todos on any date and be sure, that these todos will be saved for a long time. If needed, user can delete items pressing on "X" button.

The RangePicker component is an extension of the DatePicker, enabling users to select a range of dates. It provides a user-friendly way to choose a start and end date for specific time periods. This feature is particularly useful for tasks that require a duration, like booking accommodations or planning vacations. The RangePicker offers a seamless experience by highlighting the selected range and allowing users to easily modify it if needed.

Installation

yarn add datepicker-xyermik
# or
npm install datepicker-xyermik@latest

Import

import { DatePicker, TodoPicker, RangePicker } from "datepicker-xyermik"

Dependencies

• React
• ReactDOM
• Styled-components

Props

includeHolidays: boolean

The includeHolidays prop is a boolean that determines whether holidays should be highlighted in any Picker component. If true, the holidays will be highlighted and indicated with green color

<DatePicker includeHolidays={true} />

or

<DatePicker includeHolidays />

default: true

includeWeekends: boolean

The includeWeekends prop is a boolean that determines whether weekends should be highlighted in any Picker component. If true, the holidays will be highlighted and indicated with red color

<DatePicker includeWeekends />

default: true

theme: 'dark' | 'light'

The theme prop is a union of two string values that specifies the theme of chosen picker components. This prop allows user to choose theme of picker components.

<DatePicker theme="dark" />

default: 'dark'

min, max: string (dd.mm.yyyy)

The min and max props are string that define the range of possible dates that user can select from in DatePicker and TodoPicker components. The max string represents the latest date that can be selected, while the min string represents the earliest one. These props allow users to define a range of dates and throw errors if selected date is not in range.

<DatePicker min="01.01.2016" max="10.12.2024" />

default: ""

startOfWeek: 'Monday' | 'Sunday'

The startOfWeek prop is a union of 2 string values that determines the starting day of the week in any picker component. This prop allows to customize calendar interface depending on the week start day.

<DatePicker startOfWeek="Sunday" />

default: 'Monday'

value: string (dd.mm.yyyy)

The value prop is a string value in format of dd.mm.yyyy, which allows users to pass a default selected value to DatePicker and TodoPicker components.

<DatePicker value="04.05.2025" />

default: null

fromValue, toValue: string (dd.mm.yyyy)

The fromValue and toValue props are strings, that allow user to pass default date values to get the default date range for RangePicker component.

<DatePicker fromValue="05.02.2025" toValue="10.02.2025" />

default: fromValue - 01.01.2023, toValue - 05.01.2023

Project scripts

The scripts that are available in this projects:

yarn storybook

Runs storybook in development mode. Open http://localhost:4500 to view it in your browser.

The page will automatically reload when changes are made and saved

yarn build

Builds the library for production to the folder dist

yarn lint

Runs eslint to check for errors

yarn lint:fix

Runs ellint to check for errors and fix them automatically.

yarn test

Runs jest unit-tests.

yarn deploy-storybook

Runs deployment script to github-pages. It automatically build storybook to storybook-static folder and then uploads it to github-pages

Built with:

React

Typescript

Rollup

Storybook

Styled-components

Eslint

Babel

Jest

Yarn Berry

Husky

Prettier