Veda React DatePicker

A modern, accessible, and customizable date picker component for React applications with single date and range selection support.

Features

• 🎨 Modern and minimalist design
• 📅 Single date and date range selection
• 🎯 Full TypeScript support
• 📱 Responsive design with mobile optimization
• ⌨️ Keyboard navigation and accessibility
• 🎊 Smooth animations and transitions
• 🎭 Comprehensive theme customization
• 🔄 Month/year quick selection
• ⚡ Date shortcuts support
• 📝 Optional text input support
• 🔒 Min/max date constraints
• ⚛️ Controlled & uncontrolled modes

Installation

npm install veda-react-datepicker
# or
yarn add veda-react-datepicker

Basic Usage

JavaScript

import { DatePicker } from 'veda-react-datepicker';

// Single Date Selection
function SingleDateExample() {
  return (
    <DatePicker
      onChange={(date) => console.log(date)}
      placeholder="Select date"
    />
  );
}

// Date Range Selection
function DateRangeExample() {
  return (
    <DatePicker
      mode="range"
      onChange={(range) => console.log(range)}
      placeholder="Select date range"
    />
  );
}

TypeScript

import { DatePicker } from 'veda-react-datepicker';
import type { DateRange } from 'veda-react-datepicker';

// Single Date Selection
function SingleDateExample() {
  const handleChange = (date: Date | null) => {
    console.log(date);
  };

  return (
    <DatePicker
      onChange={handleChange}
      placeholder="Select date"
    />
  );
}

// Date Range Selection
function DateRangeExample() {
  const handleChange = (range: DateRange | null) => {
    console.log(range?.startDate, range?.endDate);
  };

  return (
    <DatePicker
      mode="range"
      onChange={handleChange}
      placeholder="Select date range"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date \| DateRange \| null | - | Controlled value | | defaultValue | Date \| DateRange | - | Initial uncontrolled value | | onChange | (value: Date \| DateRange \| null) => void | - | Change callback | | mode | 'single' \| 'range' | 'single' | Selection mode | | minDate | Date | - | Minimum selectable date | | maxDate | Date | - | Maximum selectable date | | placeholder | string | "Select date" | Input placeholder | | dateFormat | DateFormat | "MM/DD/YYYY" | Date display format | | disabled | boolean | false | Disable the picker | | allowInput | boolean | true | Allow manual text input | | shortcuts | Shortcut[] | [] | Quick selection shortcuts | | theme | ThemeConfig | - | Theme customization | | as | ElementType | 'div' | Container component | | input | ElementType | - | Custom input component | | className | string | "" | Additional CSS class | | containerProps | object | {} | Container props | | inputProps | object | {} | Input props | | parseDate | (value: string) => Date \| null | - | Custom date parser |

Advanced Examples

Date Range with Shortcuts

import { DatePicker } from 'veda-react-datepicker';
import type { Shortcut } from 'veda-react-datepicker';

function RangeWithShortcuts() {
  const shortcuts: Shortcut[] = [
    {
      label: 'Last 7 Days',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 6);
        return { startDate: start, endDate: end };
      }
    },
    {
      label: 'This Month',
      value: () => {
        const now = new Date();
        const start = new Date(now.getFullYear(), now.getMonth(), 1);
        const end = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        return { startDate: start, endDate: end };
      }
    }
  ];

  return (
    <DatePicker
      mode="range"
      shortcuts={shortcuts}
      onChange={(range) => console.log(range)}
    />
  );
}

Custom Theme

import { DatePicker } from 'veda-react-datepicker';
import type { ThemeConfig } from 'veda-react-datepicker';

function ThemedDatePicker() {
  const theme: ThemeConfig = {
    colors: {
      primary: '#4F46E5',
      hover: '#4338CA',
      text: '#1F2937',
      border: '#E5E7EB',
      background: '#F9FAFB',
      selected: '#4F46E5',
      range: 'rgba(79, 70, 229, 0.1)',
      rangeHover: 'rgba(79, 70, 229, 0.07)'
    },
    borderRadius: '8px',
    fontSize: '0.875rem'
  };

  return (
    <DatePicker
      onChange={(date) => console.log(date)}
      theme={theme}
    />
  );
}

Custom Input Component

import { DatePicker } from 'veda-react-datepicker';
import { Calendar } from 'lucide-react';

const CustomInput = React.forwardRef<
  HTMLInputElement,
  React.InputHTMLAttributes<HTMLInputElement>
>(({ value, onChange, ...props }, ref) => (
  <div className="custom-input-wrapper">
    <input
      ref={ref}
      value={value}
      onChange={onChange}
      className="custom-input"
      {...props}
    />
    <Calendar className="calendar-icon" size={18} />
  </div>
));

function CustomInputExample() {
  return (
    <DatePicker
      input={CustomInput}
      inputProps={{
        className: 'my-custom-input',
        'aria-label': 'Select date'
      }}
    />
  );
}

TypeScript Support

The package includes comprehensive TypeScript definitions. Key types:

type DateFormat = 
  | 'YYYY-MM-DD' 
  | 'YYYY/MM/DD' 
  | 'YYYY.MM.DD'
  | 'DD-MM-YYYY'
  | 'DD/MM/YYYY'
  | 'DD.MM.YYYY'
  | 'MM-DD-YYYY'
  | 'MM/DD/YYYY'
  | 'MM.DD.YYYY';

interface DateRange {
  startDate: Date | null;
  endDate: Date | null;
}

interface ThemeConfig {
  colors?: {
    primary?: string;
    hover?: string;
    background?: string;
    text?: string;
    border?: string;
    selected?: string;
    range?: string;
    rangeHover?: string;
  };
  borderRadius?: string;
  fontSize?: string;
}

interface Shortcut {
  label: string;
  value: Date | DateRange | (() => Date | DateRange);
}

License

MIT © Latiful Mousom