Date picker and Date range picker Component

A flexible and customizable React date picker and date range picker component with preset options, custom themes, and intuitive calendar interface.

Features

• 📅 Interactive calendar with date and date range selection
• ⚡ Quick preset options (Today, Yesterday, This Week, etc.)
• 🎨 Fully customizable themes and styling
• 📱 Responsive design
• 🔧 Configurable icons and button styles
• 🎯 TypeScript support
• 🚀 Easy integration

Installation

npm i siyaram-daterange-pikker
npm install siyaram-daterange-pikker
yarn add siyaram-daterange-pikker

Make sure you have React and react-icons installed in your project.

Basic Usage

import React, { useState } from 'react';
import DateRangePicker, { DatePicker } from 'siyaram-daterange-pikker';

function App() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleDateChange = (start, end) => {
    setStartDate(start);
    setEndDate(end);
    console.log('Selected range:', start, end);
  };

  return (
    <div>
      <DateRangePicker onChange={handleDateChange} />
    </div>
  );
}

Props

DateRangePickerProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | onChange | (startDate: Date \| null, endDate: Date \| null) => void | - | Callback function called when date range changes | | initialStartDate | Date \| null | null | Initial start date | | initialEndDate | Date \| null | null | Initial end date | | predefinedDates | Array<{label: string, date: string}> | Default dates | Array of predefined dates to show | | className | string | '' | Additional CSS class for the container | | theme | ThemeObject | Default theme | Custom theme configuration | | buttonStyle | React.CSSProperties | {} | Inline styles for the trigger button | | buttonClassName | string | '' | Additional CSS class for the trigger button | | iconSize | number | 16 | Size of the calendar icon | | chevronSize | number | 12 | Size of the dropdown chevron | | showIcon | boolean | true | Whether to show the calendar icon | | showChevron | boolean | true | Whether to show the dropdown chevron | | buttonProps | React.ButtonHTMLAttributes<HTMLButtonElement> | {} | Additional props for the button element |

Theme Object

interface Theme {
  primaryColor?: string;        // Main accent color
  primaryColorHover?: string;   // Hover state for primary color
  primaryColorLight?: string;   // Light version for range highlighting
  textColor?: string;           // Main text color
  borderColor?: string;         // Border color
  backgroundColor?: string;     // Background color
  hoverColor?: string;          // Hover background color
  shadowColor?: string;         // Shadow color
}

Examples

Basic Implementation

<DateRangePicker 
  onChange={(start, end) => console.log(start, end)}
/>

With Initial Dates

<DateRangePicker 
  initialStartDate={new Date('2024-01-01')}
  initialEndDate={new Date('2024-01-31')}
  onChange={(start, end) => console.log(start, end)}
/>

<DatePicker
  initialDate={new Date('2024-01-01')}
  onChange={(date) => console.log(date)}
/>

Custom Theme

<DateRangePicker 
  theme={{
    primaryColor: '#10b981',
    primaryColorHover: '#059669',
    primaryColorLight: '#d1fae5',
    textColor: '#1f2937',
    borderColor: '#d1d5db',
    backgroundColor: '#ffffff'
  }}
  onChange={(start, end) => console.log(start, end)}
/>

Custom Predefined Dates

<DateRangePicker 
  predefinedDates={[
    { label: 'Q1 Start', date: '2024-01-01' },
    { label: 'Q2 Start', date: '2024-04-01' },
    { label: 'Q3 Start', date: '2024-07-01' },
    { label: 'Q4 Start', date: '2024-10-01' }
  ]}
  onChange={(start, end) => console.log(start, end)}
/>

Custom Styling

<DateRangePicker 
  className="my-custom-picker"
  buttonClassName="my-custom-button"
  buttonStyle={{
    padding: '12px 20px',
    fontSize: '16px',
    fontWeight: 'bold'
  }}
  iconSize={20}
  chevronSize={16}
  onChange={(start, end) => console.log(start, end)}
/>

Without Icons

<DateRangePicker 
  showIcon={false}
  showChevron={false}
  onChange={(start, end) => console.log(start, end)}
/>

Preset Options

The component includes the following preset date ranges:

• Today: Current date
• Yesterday: Previous day
• This Week: From Sunday of current week to today
• Last Week: Complete previous week (Sunday to Saturday)
• This Month: From 1st of current month to today
• Last Month: Complete previous month

Styling

The component uses CSS-in-JS for styling with customizable theme properties. All styles are scoped with the drp- prefix to avoid conflicts.

CSS Classes

• .drp-container: Main container
• .drp-trigger: Trigger button
• .drp-dropdown: Dropdown container
• .drp-calendar: Calendar section
• .drp-day: Individual day cells
• .drp-day-selected: Selected dates
• .drp-day-range: Dates in selected range
• .drp-preset: Preset option buttons

Behavior

Date Selection

1. Click on a date to start selection
2. Click on another date to complete the range
3. If you click on a date before the start date, it becomes the new start date
4. Selecting a preset immediately sets both start and end dates

Keyboard Navigation

• Month/Year dropdowns support keyboard navigation
• Arrow buttons allow month navigation

Click Outside

The dropdown automatically closes when clicking outside the component.

Dependencies

• react: ^16.8.0 or higher
• react-icons: For icons (FaChevronLeft, FaChevronRight, FaChevronDown, FaCalendarDays)

Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• IE11+ (with polyfills for modern JavaScript features)

Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

MIT License - feel free to use in your projects!

Changelog

v1.0.0

• Initial release
• Basic date range selection
• Preset options
• Custom theming
• Responsive design

Troubleshooting

Common Issues

Component not rendering properly

• Ensure react-icons is installed
• Check for CSS conflicts with existing styles

Dates not updating

• Make sure to implement the onChange callback
• Check console for any JavaScript errors

Styling issues

• The component uses CSS-in-JS, ensure no conflicting styles
• Use the theme prop for customization instead of overriding CSS

Support

For issues, feature requests, or questions, please create an issue in the repository or contact the maintainers.