date-picker-govorec
v1.3.1
Published
modsen test-2
Downloads
6
Readme
DatePicker
DatePicker - это библиотека, для работы с различными видами календаря.
Содержание
Описание
DatePicker - это библиотека с множеством функционала, который поможет в зависимости от потребностей выбирать конфигурацию и настраивать ее под себя.
Deploy(demo)
NPM
Чтобы установить библиотеку в ваш проект используйте команду:
(yarn add date-picker-govorec'
)
Функции
- Просмотр календаря;
- Выбор диапазона для календаря;
- Дефолтный календарь с заранее установленным диапазоном;
- Возможность выбора начала недели(с понедельника или воскресенья);
- Выбор вида календаря (по неделям, месяцам и т.д.);
- При двойном клике на определенный день добавляется список задач и сохраняется в localStorage;
- Возможность переключения на предыдущий(ую)/следующий(ую) неделю/месяц/год;
- Возможность выбора максимальной даты календаря;
- Возможность выбора минимальной даты для календаря;
- Возможность скрывать/показывать выходные дни и выделять праздничные дни другим цветом;
- Возможность перейти в календаре на введенную пользователем дату;
Как использовать
Библиотека date-picker-govorec
предоставляет компоненты для выбора даты в приложениях на React. Основные компоненты включают единичный календарь SingleDatePicker
и календарь для выбора диапазона дат RangeComponent
. Оба компонента поддерживают гибкую настройку через передаваемые пропсы.
SingleDatePicker
Компонент для выбора единственной даты. Поддерживает следующие аргументы настройки:
| Аргумент | Тип | Описание |
| --------------- | :----------------: | :--------------------------------------------------------------------: |
| date | string | Дата по умолчанию |
| calendarType | week
или month
| С какого типа начать календарь (по неделям или на целый месяц) |
| minDate | date | Минимально возможная дата |
| maxDate | date | Максимально возможная дата |
| weekends | boolean | Включить или отключить выбор выходных |
| holidays | boolean | Включить или отключить выделение праздников |
| beginWithMonday | boolean | Начинать неделю с понедельника, если true (по умолчанию с воскресенья) |
Пример использования компонента:
<SingleDatePicker
date={'10.06.2024'}
minDate={new Date('03-01-2020')}
maxDate={new Date('05-01-2026')}
holidays={showHolidays}
weekends={showWeekends}
beginWithMonday={beginWithMonday}
/>
RangeComponent
Компонент для выбора диапазона дат. Поддерживает следующие аргументы настройки:
| Аргумент | Тип | Описание |
| --------------- | :----------------: | :--------------------------------------------------------------------: |
| date | string | Дата по умолчанию |
| calendarType | week
или month
| С какого типа начать календарь (по неделям или на целый месяц) |
| minDate | date | Минимально возможная дата |
| maxDate | date | Максимально возможная дата |
| weekends | boolean | Включить или отключить выбор выходных |
| holidays | boolean | Включить или отключить выделение праздников |
| beginWithMonday | boolean | Начинать неделю с понедельника, если true (по умолчанию с воскресенья) |
| dateFrom | date | Начальная дата диапазона |
| dateTo | date | Конечная дата диапазона |
Пример использования компонента:
<RangeComponent
date="06.08.2024"
calendarType="month"
minDate={new Date('06.20.2022')}
maxDate={new Date('06.20.2026')}
weekends={true}
holidays={false}
beginWithMonday={true}
dateFrom={'06.08.2024'}
dateTo={'06.20.2024'}
/>
Используемые технологии
DatePicker создан с использованием следующих технологий:
- node.js
- babel
- eslint
- yarn
- rollup
- storybook
- react
- prop-types
- styled-components
- jest
Использование
После загрузки библиотеки вы можете:
- Двойной клик для добавления заметок: При двойном клике на дату можно включить режим добавления заметок.
- Всплывающий календарь: При нажатии на input поле появляется календарь. При повторном нажатии он исчезает.
- Кнопки для очистки: В компоненте предусмотрены кнопки для очистки выбранных дат.
- Тип календаря: В поле calendarType можно указать, какой тип календаря показывать при начальной загрузке компонента - отображение по неделям или целый месяц
- Скрывать/показывать праздничные и выходные дни.
- Переключаться между видами календаря.
- Добавлять задачи и устанавливать min max ограничения в дате.
- Начинать неделю с воскресенья или понедельника на выбор, устнавливать default значение.
Стиль кода
- Используйте для типизации интерфейсы.
- Избегайте магических чисел и строк. Вместо этого используйте константы или переменные с описательными именами, чтобы сделать код более читаемым и поддерживаемым.
- Используйте функциональные компоненты, где это возможно.
- Избегайте использования инлайн стилей.
- Разделяйте компоненты на маленькие и переиспользуемые части.
- Используйте PropTypes или TypeScript для проверки типов пропсов.
- Избегайте использования индексов массива в качестве ключей в списке компонентов.
- Тестируйте компоненты.
Вклад в развитие
Приветствуются вклады в развитие проекта "DatePicker"! Если вы хотите внести свой вклад, пожалуйста, следуйте этим рекомендациям:
- Создайте свою ветку для новой функциональности (
git checkout -b feature/НазваниеВашейФункциональности
). - Внесите изменения (
git commit -am 'Добавление новой функциональности'
). - Отправьте изменения в вашу ветку (
git push origin feature/НазваниеВашейФункциональности
). - Создайте новый запрос на включение изменений (Pull Request).
Пожалуйста, убедитесь, что вы следуете стилю кода и соглашениям, использованным в проекте.