Harpreet Calendar

A modern, customizable React DatePicker component with single and range selection support, built with TypeScript, date-fns, and Tailwind CSS.

Features

• ✅ Single date selection
• ✅ Date range selection
• ✅ Internationalization support (English & German)
• ✅ Min/Max date constraints
• ✅ Customizable styling
• ✅ TypeScript support
• ✅ Fully accessible
• ✅ Portal-based dropdown (prevents overflow issues)

Installation

npm install harpreet-calender
# or
yarn add harpreet-calender
# or
pnpm add harpreet-calender

Peer Dependencies

Make sure you have these installed:

npm install react react-dom date-fns react-i18next

Usage

Basic Single Date Picker

import { DatePicker } from 'harpreet-calender';
import { useState } from 'react';

function App() {
  const [date, setDate] = useState<string | null>(null);

  return (
    <DatePicker
      mode="single"
      value={date}
      onChange={setDate}
      placeholder="Select a date"
    />
  );
}

Date Range Picker

import { DatePicker } from 'harpreet-calender';
import { useState } from 'react';

function App() {
  const [dateRange, setDateRange] = useState<{ start: string; end: string } | null>(null);

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

With Min/Max Dates

<DatePicker
  mode="single"
  value={date}
  onChange={setDate}
  minDate={new Date('2024-01-01')}
  maxDate={new Date('2024-12-31')}
  label="Select a date"
  required
/>

With Custom Styling

<DatePicker
  mode="single"
  value={date}
  onChange={setDate}
  className="custom-input-class"
  placeholder="Pick a date"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | mode | 'single' \| 'range' | 'single' | Selection mode | | value | string \| { start: string; end: string } \| null | null | Current selected value (YYYY-MM-DD format) | | onChange | (value: string \| { start: string; end: string } \| null) => void | - | Callback when date changes | | placeholder | string | 'Select date' | Input placeholder text | | className | string | '' | Additional CSS classes for input | | disabled | boolean | false | Disable the date picker | | minDate | Date | - | Minimum selectable date | | maxDate | Date | - | Maximum selectable date | | label | string \| React.ReactNode | - | Label for the input | | required | boolean | false | Show required indicator |

Internationalization

The component uses react-i18next for internationalization. Make sure you have i18n configured in your app:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: {} },
      de: { translation: {} }
    },
    lng: 'en',
    fallbackLng: 'en',
  });

Styling

This component uses Tailwind CSS classes. Make sure Tailwind is configured in your project. The component uses the following color utilities that you can customize in your tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: '#your-color',
          500: '#your-color',
          600: '#your-color',
          700: '#your-color',
        }
      }
    }
  }
}

License

MIT

Author

Harpreet Kumar

Repository

GitHub Repository