React DatePicker

Modern, customizable, and user-friendly React DatePicker component with dark mode and multi-language support.

🚀 Features

• ✅ Modern and elegant design
• ✅ Dark Mode - Full dark mode support
• ✅ 11 Language Support - English, Turkish, German, French, Spanish, Italian, Portuguese, Russian, Japanese, Chinese, Arabic
• ✅ Theme System - 4 preset themes + custom theme support
• ✅ Storybook - Interactive component showcase
• ✅ API Documentation - Complete API reference
• ✅ Test Coverage - 90+ unit tests
• ✅ Date selection
• ✅ Date and time selection
• ✅ Date range selection (DateRangePicker)
• ✅ Min/Max date constraints
• ✅ Time Picker (TimePicker)
• ✅ Disableable
• ✅ TypeScript support
• ✅ Fully customizable
• ✅ Responsive design

📦 Installation

Install via NPM

npm install react-datepicker-bkrdmrcioglu
# or
yarn add react-datepicker-bkrdmrcioglu
# or
pnpm add react-datepicker-bkrdmrcioglu

Requirements

• React 16.8+
• React DOM 16.8+

Import Styles

The component comes with its own CSS. Import it in your root layout or entry file:

import 'react-datepicker-bkrdmrcioglu/dist/style.css';

🏃 Development (For This Repo)

npm install
npm run dev

Open http://localhost:3000 in your browser.

📖 Usage

Basic Usage

import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
import { useState } from 'react';

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

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      language="en" // Default: 'en'
    />
  );
}

Language Support

import { DatePicker } from 'react-datepicker-bkrdmrcioglu';
import type { Language } from 'react-datepicker-bkrdmrcioglu';

// English (default)
<DatePicker language="en" />

// Turkish
<DatePicker language="tr" />

// German
<DatePicker language="de" />

// French
<DatePicker language="fr" />

// Spanish
<DatePicker language="es" />

// Italian
<DatePicker language="it" />

// Portuguese
<DatePicker language="pt" />

// Russian
<DatePicker language="ru" />

// Japanese
<DatePicker language="ja" />

// Chinese
<DatePicker language="zh" />

// Arabic
<DatePicker language="ar" />

Date and Time Selection

<DatePicker
  value={date}
  onChange={setDate}
  showTime={true}
  placeholder="Select date and time..."
/>

Min/Max Date Constraints

const minDate = new Date();
minDate.setDate(minDate.getDate() - 7);
const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30);

<DatePicker
  value={date}
  onChange={setDate}
  minDate={minDate}
  maxDate={maxDate}
/>

Date Range Selection

import { DateRangePicker } from 'react-datepicker-bkrdmrcioglu';
import { useState } from 'react';

function MyComponent() {
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  return (
    <DateRangePicker
      startDate={startDate}
      endDate={endDate}
      onChange={(start, end) => {
        setStartDate(start);
        setEndDate(end);
      }}
    />
  );
}

Time Picker

import { TimePicker } from 'react-datepicker-bkrdmrcioglu';
import { useState } from 'react';

function MyComponent() {
  const [time, setTime] = useState<string | null>(null);

  return (
    <TimePicker
      value={time}
      onChange={setTime}
      placeholder="Select time..."
    />
  );
}

🔧 API Reference

DatePicker Props

Prop	Type	Default	Description
value	Date | null	undefined	Selected date
onChange	(date: Date | null) => void	undefined	Called when date changes
placeholder	string	"Select date..."	Input placeholder text
minDate	Date	undefined	Minimum selectable date
maxDate	Date	undefined	Maximum selectable date
disabled	boolean	false	Disable the picker
className	string	""	Additional CSS classes
showTime	boolean	false	Show time selection
format	string	"DD/MM/YYYY"	Date format
language	Language	"en"	Language selection (en, tr, de, fr, es, it, pt, ru, ja, zh, ar)

DateRangePicker Props

Prop	Type	Default	Description
startDate	Date | null	undefined	Start date
endDate	Date | null	undefined	End date
onChange	(start: Date | null, end: Date | null) => void	undefined	Called when dates change
placeholder	string	"Select date range..."	Placeholder text
minDate	Date	undefined	Minimum selectable date
maxDate	Date	undefined	Maximum selectable date
disabled	boolean	false	Disable the picker
className	string	""	Additional CSS classes

TimePicker Props

Prop	Type	Default	Description
value	string | null	undefined	Selected time (HH:MM)
onChange	(time: string | null) => void	undefined	Called when time changes
placeholder	string	"Select time..."	Placeholder text
disabled	boolean	false	Disable the picker
className	string	""	Additional CSS classes
format	"24h" | "12h"	"24h"	Time format (currently 24h)
language	Language	"en"	Language selection

🎨 Customization

Components are highly customizable through props, themes, and CSS.

Dark Mode

Dark mode is automatically set based on system preference or can be controlled manually using the DarkModeToggle component. All components support dark mode.

Important: You need to add the dark class to the HTML element for dark mode:

import { DarkModeToggle } from 'react-datepicker-bkrdmrcioglu';

function MyComponent() {
  return <DarkModeToggle />;
}

To manually control dark mode:

// Enable dark mode
document.documentElement.classList.add('dark');

// Disable dark mode
document.documentElement.classList.remove('dark');

Language Selector

You can use the LanguageSelector component for language selection:

import { LanguageSelector, DatePicker } from 'react-datepicker-bkrdmrcioglu';
import type { Language } from 'react-datepicker-bkrdmrcioglu';
import { useState } from 'react';

function MyComponent() {
  const [language, setLanguage] = useState<Language>('en');
  
  return (
    <>
      <LanguageSelector value={language} onChange={setLanguage} />
      <DatePicker language={language} />
    </>
  );
}

Theme System

Customize the appearance of DatePicker components using the built-in theme system:

import { ThemeProvider, DatePicker } from 'react-datepicker-bkrdmrcioglu';

function App() {
  return (
    <ThemeProvider defaultTheme="material">
      <DatePicker value={date} onChange={setDate} />
    </ThemeProvider>
  );
}

Available Themes

• default - Clean and modern design
• material - Google Material Design inspired
• minimal - Simple and clean
• glassmorphism - Modern glass effect

Custom Theme

import { ThemeProvider } from 'react-datepicker-bkrdmrcioglu';
import type { Theme } from 'react-datepicker-bkrdmrcioglu';

const customTheme: Theme = {
  name: 'Custom',
  colors: {
    primary: '#8b5cf6',
    background: '#ffffff',
    // ... other colors
  },
  // ... other theme properties
};

function App() {
  return (
    <ThemeProvider defaultTheme={customTheme}>
      <DatePicker />
    </ThemeProvider>
  );
}

📚 Documentation

• Live Demo: https://react-datepicker-mu.vercel.app
• API Reference: /docs/api - Complete API documentation
• Theme Playground: /docs/themes - Interactive theme customization
• Storybook: Run npm run storybook for interactive component showcase

🧪 Testing

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Generate coverage report
npm run test:coverage

📝 License

MIT License - Feel free to use it.

🤝 Contributing

We welcome your contributions! Please open an issue or submit a pull request.

📧 Contact

You can use GitHub Issues for your questions.

---

⭐ If you liked this project, don't forget to give it a star!