Date Picker

Date Picker — это легковесная и интуитивно понятная библиотека, предназначенная для интеграции функционала календаря в ваши веб-приложения. Она поддерживает различные форматы отображения, позволяет настраивать минимальные и максимальные даты, добавлять задачи в конкретные дни, добавлять свои праздники и многое другое.

Установка

npm i date-picker-calendar-react

Использование

import { Calendar } from 'date-picker-calendar-react'

function App() {
    return <Calendar />
}

const root = createRoot(document.getElementById('root'))
root.render(<App />)

Базовый календарь

<Calendar />

При нажатии на год/месяц/неделю открывается дополнительный календарь с возможностью переключения по соответствующим параметрам

Календарь с инпутом

<Calendar isWithInput={true} />

Ввод даты осуществляется в формате дд/мм/гггг

Календарь с выбором диапазона

<Calendar isWithRange={true} />

Календарь с инпутом и выбором диапазона

<Calendar isWithInput={true} isWithRange={true} />

Календарь с установкой минимальной и максимальной даты

<Calendar isWithMinMaxDate={true} minDate="06/09/2024" maxDate="24/09/2024" />

Минимальная и максимальная дата вводиться в формате дд/мм/гггг, при неправильном вводе или при вводе минимальной даты больше максимальной ограничение применимо не будет.

Календарь с началом недели с воскресения

<Calendar isWithStartSunday={true} />

Календарь с выделением праздников

<Calendar
    isWithHoliday={true}
    holidaysData={[{ date: '12/01/2024', holiday: 'Some holiday' }]}
/>

Дата о празнике вводиться в формате дд/мм/гггг, в случае ввода некорректной даты, праздник отображаться не будет

Получение данных

В приложении предусмотренно получение данных о пользовательском вводе

import { calendarData } from 'date-picker-calendar-react'

Объект включает в себя данные о вводе в инпут, выбранном дне, выбранном диапазоне, активном годе, месяце и номере недели

О приложении

React

В качестве основной библиотеки использовался React

Типизация

В приложении в качестве типизации использовался Typescript

Для типизации props используется interface.

Стилизация

Стилизация с помощью styled-components StyledComponents

Тестирование

Тестирование реализованно с использованием Jest и RTL

Транспилер

Преобразование современного кода JavaScript в пердыдущие стандарты было осуществленно с помощью Babel

Сборщик

В качестве сборщика проекта был Vite и Rollup

Storybook

Для изоляционного построения пользовательского интерфейса использовался Storybook

Линтеры

Для анализа JS кода использовался Eslint, для его форматирования Prettier

Деплой

Деплой приложения находится на Vercel

Зависимости

Node >= 18v

Ссылки

Мой gitHub