npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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 значение.

Стиль кода

  1. Используйте для типизации интерфейсы.
  2. Избегайте магических чисел и строк. Вместо этого используйте константы или переменные с описательными именами, чтобы сделать код более читаемым и поддерживаемым.
  3. Используйте функциональные компоненты, где это возможно.
  4. Избегайте использования инлайн стилей.
  5. Разделяйте компоненты на маленькие и переиспользуемые части.
  6. Используйте PropTypes или TypeScript для проверки типов пропсов.
  7. Избегайте использования индексов массива в качестве ключей в списке компонентов.
  8. Тестируйте компоненты.

Вклад в развитие

Приветствуются вклады в развитие проекта "DatePicker"! Если вы хотите внести свой вклад, пожалуйста, следуйте этим рекомендациям:

  1. Создайте свою ветку для новой функциональности (git checkout -b feature/НазваниеВашейФункциональности).
  2. Внесите изменения (git commit -am 'Добавление новой функциональности').
  3. Отправьте изменения в вашу ветку (git push origin feature/НазваниеВашейФункциональности).
  4. Создайте новый запрос на включение изменений (Pull Request).

Пожалуйста, убедитесь, что вы следуете стилю кода и соглашениям, использованным в проекте.