Skip to content

README.md

Latest commit

 

History

History
366 lines (272 loc) · 8.58 KB

README.md

File metadata and controls

366 lines (272 loc) · 8.58 KB
Raw

React DatePicker

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

View on GitHub Live Demo

🚀 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!