React Chakra UI Date Picker

A modern, accessible React date picker component built with Chakra UI and TypeScript.

✨ Features

• 🎨 Chakra UI Integration - Seamlessly integrates with Chakra UI theme system
• 📱 Responsive Design - Works perfectly on mobile and desktop
• 🎯 TypeScript Support - Full TypeScript support with type definitions
• ♿ Accessible - Built with accessibility in mind
• 🎛️ Customizable - Easy to customize with Chakra UI theme
• 📅 Date Range Support - Support for single date and date range selection
• 🌍 Internationalization - Support for multiple languages and date formats

📦 Installation

npm install react-chakra-ui-datepicker
# or
yarn add react-chakra-ui-datepicker

🔧 Peer Dependencies

This library requires the following peer dependencies:

npm install @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion

🚀 Quick Start

Basic Usage

import React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
import { DateSingleInput } from 'react-chakra-ui-datepicker'

function App() {
  return (
    <ChakraProvider>
      <DateSingleInput 
        name="date"
        placeholder="Select a date"
      />
    </ChakraProvider>
  )
}

Date Range Selection

import { DateRangeInput } from 'react-chakra-ui-datepicker'

function DateRangeExample() {
  return (
    <DateRangeInput 
      startDatePlaceholder="Start date"
      endDatePlaceholder="End date"
      dateFormat="dd/MM/yyyy"
    />
  )
}

With React Hook Form

import { useForm } from 'react-hook-form'
import { DateSingleInput, DateRangeInput } from 'react-chakra-ui-datepicker'

function FormExample() {
  const { register, handleSubmit } = useForm()

  const onSubmit = (data) => {
    console.log('Form data:', data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <DateSingleInput 
        ref={register}
        name="singleDate"
        placeholder="Select date"
      />
      
      <DateRangeInput 
        startRef={register}
        endRef={register}
        startDateName="startDate"
        endDateName="endDate"
      />
      
      <button type="submit">Submit</button>
    </form>
  )
}

🎨 Customization

Theme Integration

import { ChakraProvider, extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    brand: {
      500: '#3182ce',
      600: '#2b6cb0',
    }
  }
})

function App() {
  return (
    <ChakraProvider theme={theme}>
      <DateSingleInput />
    </ChakraProvider>
  )
}

Custom Styling

import { Datepicker } from 'react-chakra-ui-datepicker'

function CustomDatepicker() {
  const customStyles = {
    datepickerContainer: {
      background: 'white',
      borderRadius: 'lg',
      shadow: 'xl',
    },
    day: {
      selected: {
        background: 'blue.500',
        color: 'white',
      }
    }
  }

  return (
    <Datepicker 
      styles={customStyles}
      overwriteDefaultStyles={true}
    />
  )
}

📚 API Reference

DateSingleInput Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | name | string | - | Input field name | | placeholder | string | - | Placeholder text | | dateFormat | string | "MM/dd/yyyy" | Date format | | onChange | function | - | Change handler | | value | Date | - | Current value | | ref | RefObject | - | React ref |

DateRangeInput Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | startDateName | string | - | Start date field name | | endDateName | string | - | End date field name | | startDatePlaceholder | string | - | Start date placeholder | | endDatePlaceholder | string | - | End date placeholder | | dateFormat | string | "MM/dd/yyyy" | Date format | | startRef | RefObject | - | Start date ref | | endRef | RefObject | - | End date ref |

Datepicker Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | numberOfMonths | number | 2 | Number of months to display | | vertical | boolean | false | Vertical layout | | styles | object | - | Custom styles | | overwriteDefaultStyles | boolean | false | Overwrite default styles | | phrases | object | - | Custom phrases/text |

🌍 Internationalization

import { phrases } from 'react-chakra-ui-datepicker'

const thaiPhrases = {
  ...phrases,
  datepickerStartDatePlaceholder: 'เลือกวันที่เริ่มต้น',
  datepickerEndDatePlaceholder: 'เลือกวันที่สิ้นสุด',
}

<DateRangeInput phrases={thaiPhrases} />

🧪 Development

Commands

# Start development
npm start

# Build library
npm run build

# Run tests
npm test

# Start Storybook
npm run storybook

# Run example
npm run start-example

Storybook

View interactive examples and documentation:

npm run storybook

Then open http://localhost:6007

📄 License

MIT © Chris Bull

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Changelog

v0.1.0

• Initial release
• Basic date picker functionality
• Chakra UI integration
• TypeScript support
• Date range selection
• React Hook Form integration

🐛 Issues

If you encounter any issues, please file an issue.

📞 Support

For support, email [email protected] or join our Slack channel.