Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/uselessdev/datepicker

A simple datepicker with Chakra-UI and date-fns
https://github.com/uselessdev/datepicker

chakra-ui date-fns datepicker react

Last synced: 3 days ago
JSON representation

A simple datepicker with Chakra-UI and date-fns

Host: GitHub
URL: https://github.com/uselessdev/datepicker
Owner: uselessdev
License: other
Created: 2021-11-06T03:02:22.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-02-12T16:20:04.000Z (5 months ago)
Last Synced: 2024-04-14T04:48:04.663Z (3 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

Lists

awesome-chakra-ui - Chakra Datepicker - UI and date-fns. (🛠️ Tools)

README

        # Datepicker

[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#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:

![Customized calendar](docs/datepicker-custom.png)

## 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!