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

@imbios/datepicker

v2.7.1

Published

A simple react datepicker build with chakra-ui and date-fns

Downloads

4

Readme

Datepicker Component for Chakra-UI

npm version License: Apache-2.0 All Contributors

A powerful and simple-to-use datepicker component for web applications, built with date-fns for date management and styled using Chakra-UI, a modular and accessible component library. This README provides all the necessary information to get started, customize the component, and contribute to its development.

Table of Contents

Prerequisites

To integrate the datepicker into your project, ensure you have date-fns and Chakra-UI installed. These libraries are essential for date management and UI styling, respectively.

bun add date-fns

Follow the installation guide for Chakra-UI here to complete the setup.

Installation and Usage

Once the prerequisites are installed, add the datepicker component to your project using:

bun add @imbios/datepicker

Below is an example showcasing how to integrate the datepicker into your application, using Chakra-UI's provider for theming:

TODO: Update below example with newest date library agnostic approach

import { useState } from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import {
  Calendar,
  CalendarDefaultTheme,
  CalendarControls,
  CalendarPrevButton,
  CalendarNextButton,
  CalendarMonths,
  CalendarMonth,
  CalendarMonthName,
  CalendarWeek,
  CalendarDays,
} from '@imbios/datepicker'

export function App() {
  const [dates, setDates] = useState()

  const handleSelectDate = values => setDates(values)

  return (
    <ChakraProvider theme={CalendarDefaultTheme}>
      <Calendar value={dates} onSelectDate={handleSelectDate}>
        <CalendarControls>
          <CalendarPrevButton />
          <CalendarNextButton />
        </CalendarControls>
        <CalendarMonths>
          <CalendarMonth>
            <CalendarMonthName />
            <CalendarWeek />
            <CalendarDays />
          </CalendarMonth>
        </CalendarMonths>
      </Calendar>
    </ChakraProvider>
  )
}

Note: This example displays the calendar without an input field. For integration with inputs and popovers, refer to this detailed example.

Customizing the Datepicker

Customize the Calendar component using Chakra-UI's extendTheme feature. Below is an example showing how to override the default theme:

import { extendTheme } from '@chakra-ui/react'
import { CalendarDefaultTheme } from '@imbios/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',
          },
        },
      },
    },
  },
})

Theming: 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 project is licensed under the Apache-2.0 License, allowing for wide use and contribution.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome! -->