azdatepicker

Datepicker

A simple datepicker component build with date-fns and Chakra-UI.

Table of Contents

• Requisites
• Installation and Usage
• Customizing
• License

Requisites

You need to install date-fns and chakra-ui in order to use this library.

yarn add date-fns

To install chakra-ui follow their guide here.

Installation and Usage

After install these dependencies you can now install the library and use this as below:

yarn add @uselessdev/datepicker

Before to use this you can create your own theme or use the default one.

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 (
      <ChakraProvider theme={CalendarDefaultTheme}>
        <Calendar value={dates} onSelectDate={handleSelectDate}>
          <CalendarControls>
            <CalendarPrevButton />
            <CalendarNextButton />
          </CalendarControls>

          <CalendarMonths>
            <CalendarMonth>
              <CalendarMonthName />
              <CalendarWeek />
              <CalendarDays />
            </CalendarMonth>
          </CalendarMonths>
        </Calendar>
      </ChakraProvider>
    )
  )
}

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

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)

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:

import { ChakraProvider } from '@chakra-ui/react'
import { theme } from './theme'

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* children... */}
    </ChakraProvider>
  )
}

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

Contributors ✨

Thanks goes to these wonderful people (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 specification. Contributions of any kind welcome!