Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hiwllc/datepicker
A simple datepicker with Chakra-UI and date-fns
https://github.com/hiwllc/datepicker
chakra-ui date-fns datepicker react
Last synced: 3 months ago
JSON representation
A simple datepicker with Chakra-UI and date-fns
- Host: GitHub
- URL: https://github.com/hiwllc/datepicker
- Owner: uselessdev
- License: other
- Created: 2021-11-06T03:02:22.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-12T16:20:04.000Z (11 months ago)
- Last Synced: 2024-04-14T04:48:04.663Z (9 months ago)
- Topics: chakra-ui, date-fns, datepicker, react
- Language: TypeScript
- Homepage: https://uselessdev-datepicker.netlify.app
- Size: 1.44 MB
- Stars: 185
- Watchers: 6
- Forks: 26
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-chakra-ui - Chakra Datepicker - UI and date-fns. (🛠️ Tools)
README
# Datepicker
[](#contributors-)
A simple datepicker component build with [date-fns][1] and [Chakra-UI][2].
## Table of Contents
- [Requisites](#requisites)
- [Installation and Usage](#installation-and-usage)
- [Customizing](#customizing)
- [License](#license)
## Requisites
You need to install [date-fns][1] and [chakra-ui][2] in order to use this library.
```bash
yarn add date-fns
```
To install chakra-ui follow their [guide here](https://chakra-ui.com/guides/first-steps#framework-guide).
## Installation and Usage
After install these dependencies you can now install the library and use this as below:
```bash
yarn add @uselessdev/datepicker
```
Before to use this you can create your own theme or use the default one.
```tsx
import { ChakraProvider } from '@chakra-ui/react'
import {
Calendar,
CalendarDefaultTheme,
CalendarControls,
CalendarPrevButton,
CalendarNextButton,
CalendarMonths,
CalendarMonth,
CalendarMonthName,
CalendarWeek,
CalendarDays,
} from '@uselessdev/datepicker'
export function App() {
const [dates, setDates] = useState()
const handleSelectDate = (values) => setDates(values)
return (
return (
)
)
}
```
**note that the example above doens't render an input but only the calendar**
If you want to use this with inputs and a popover [you can see this example](https://uselessdev-datepicker.netlify.app/?path=/story/calendar--with-input-popover-start-end-dates)
### Customizing
You can fully customize the Calendar component using the `extendTheme` provided by chakra-ui, you can see an example below.
In your theme you can overrides the default theme (you can see all available components keys for theme customization here)
```ts
import { extendTheme } from '@chakra-ui/react'
import { CalendarDefaultTheme } from '@uselessdev/datepicker'
export const theme = extendTheme(CalendarDefaultTheme, {
components: {
Calendar: {
parts: ['calendar'],
baseStyle: {
calendar: {
borderWidth: '6px',
borderColor: 'pink.400',
rounded: 'none',
shadow: 'none',
boxShadow: '32px 16px 0 6px #3B4DCC'
},
},
},
CalendarControl: {
parts: ['button'],
baseStyle: {
button: {
h: 6,
px: 2,
rounded: 'none',
fontSize: 'sm',
color: 'white',
bgColor: 'pink.400',
_hover: {
bgColor: 'pink.200',
},
_focus: {
outline: 'none',
},
},
},
}
},
})
```
Now you can use this theme in `ChakraProvider`:
```tsx
import { ChakraProvider } from '@chakra-ui/react'
import { theme } from './theme'
function App() {
return (
{/* children... */}
)
}
```
Theses changes will produce the following results in Calendar:
## Available components theme keys
| Key name | Description | Parts |
|-----------------|---------------------------------------------------------------------------|------------------------------------------|
| Calendar | A multipart component this is reponsible for the calendar it self. |`calendar`, `months` |
| CalendarMonth | Responsible to style one month block. |`month`, `name`, `week`, `weekday`, `days`|
| CalendarDay | Applies styles to individual day. This is the only single part component. | -- |
| CalendarControl | Applies styles to prev and next months. |`controls`, `button` |
## License
This code is under the [Apache-2.0](LICENSE) License
[1]: https://date-fns.org/
[2]: https://chakra-ui.com/
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Wallace Batista
💻 🤔
Leonardo Elias
💻
kivi
💻
Guilherme Teixeira
💻
Brano Zavracky
💻
O. Qudah
📖
Tom Chen
📖 💻
Alexandre Stahmer
💻
Raphael da Rocha Pinto Barboza
💻
Greg Leuch
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!