@shashank_s/date-picker

A beautiful, accessible date picker component built with React, TypeScript, and shadcn/ui design system.

✨ Features

• 🎨 shadcn/ui Design - Follows modern design principles with proper color tokens
• ♿ Accessibility First - Full ARIA support, keyboard navigation, and screen reader compatibility
• 📱 Responsive Design - Works perfectly on all screen sizes
• 🎯 Compact Layout - Efficient use of space with content-hugging width
• 🔧 TypeScript - Fully typed with excellent IntelliSense support
• 🎨 Customizable - Easy to style and extend with Tailwind CSS
• ⚡ Performance - Optimized rendering and state management

🚀 Installation

npm install @shashank_s/date-picker
# or
yarn add @shashank_s/date-picker
# or
pnpm add @shashank_s/date-picker

📦 Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom
npm install -D @types/react @types/react-dom

🎯 Usage

Basic Usage

import { DatePicker } from '@shashank_s/date-picker';

function App() {
  const handleRangeChange = (range: { start: Date; end: Date }) => {
    console.log('Date range changed:', range);
  };

  return (
    <DatePicker 
      onRangeChange={handleRangeChange}
    />
  );
}

With Custom Props

import { DatePicker } from '@shashank_s/date-picker';

function App() {
  return (
    <DatePicker 
      onRangeChange={handleRangeChange}
      placeholder="Choose your dates"
      disabled={false}
      className="w-64"
    />
  );
}

🔧 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | onRangeChange | (range: DateRange) => void | - | Callback when date range changes | | defaultRange | DateRange | Last 30 days | Initial date range | | className | string | '' | Additional CSS classes | | placeholder | string | 'Select date range' | Placeholder text for accessibility | | disabled | boolean | false | Whether the picker is disabled |

🎨 Styling

The component uses Tailwind CSS and shadcn/ui design tokens. Make sure you have Tailwind CSS configured in your project.

Required CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }
}

🎯 Quick Select Options

The component includes these preset options:

• Today - Current date
• This month - From start of current month to today
• Last month - Full previous month
• Last 7 days - Past week
• Last 30 days - Past month
• Custom date - Opens calendar for manual selection

🔧 Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build demo app
npm run build

📝 License

MIT © Shashank S

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📚 Learn More

• React Documentation
• shadcn/ui Documentation
• Tailwind CSS Documentation