https://github.com/vkbansal/react-date-primitives
Primitives for creating Date-Picker and DateRange-Picker components in React. And It has zero dependencies!
https://github.com/vkbansal/react-date-primitives
date date-picker datepicker daterange daterange-picker daterangepicker react react-component react-components reactjs
Last synced: about 1 year ago
JSON representation
Primitives for creating Date-Picker and DateRange-Picker components in React. And It has zero dependencies!
- Host: GitHub
- URL: https://github.com/vkbansal/react-date-primitives
- Owner: vkbansal
- License: mit
- Created: 2018-03-14T16:19:44.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-09-29T09:37:32.000Z (over 1 year ago)
- Last Synced: 2025-04-19T05:16:47.065Z (about 1 year ago)
- Topics: date, date-picker, datepicker, daterange, daterange-picker, daterangepicker, react, react-component, react-components, reactjs
- Language: TypeScript
- Homepage:
- Size: 1.38 MB
- Stars: 8
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React Date Primitives
Primitives for creating Date-Picker and DateRange-Picker components in React with zero dependencies!
[![NPM version][npm-image]][npm-url]
[![main][gha-image]][gha-url]
## Installation
This package is distributed via [npm](https://www.npmjs.com/).
```bash
npm install --save react-date-primitives
```
> This package also depends on `react`. Please make sure you have it installed as well.
## Usage
```jsx
import React from 'react';
import { useCalendar } from '@vkbansal/react-date-primitives';
/**
* Use your favourite date library (eg: moment, date-fns, etc).
*/
import { isSameDay } from 'date-fns/esm';
function SimpleDatePicker() {
const { days, month, setMonth } = useCalendar();
const [selected, setSelected] = React.useState(new Date());
return (
{days.map((day, i) => (
{
day.inCurrentMonth && setSelected(day.dateObj);
}}
>
{day.dateObj.getDate()}
))}
);
}
```
## Live Examples
- [`useCalendar` hook](https://codesandbox.io/s/github/vkbansal/react-date-primitives/tree/main/packages/example-use-calendar-hook)
- [`useDateRange` hook](https://codesandbox.io/s/github/vkbansal/react-date-primitives/tree/main/packages/example-use-daterange-hook)
## License
[MIT](./LICENSE.md). Copyright(c) [Vivek Kumar Bansal](http://vkbansal.me/)
[npm-url]: https://npmjs.org/package/@vkbansal/react-date-primitives
[npm-image]: https://img.shields.io/npm/v/@vkbansal/react-date-primitives.svg?style=flat-square
[gha-url]: https://github.com/vkbansal/react-date-primitives/actions/workflows/main.yml
[gha-image]: https://img.shields.io/github/workflow/status/vkbansal/react-date-primitives/main?style=flat-square