Theme Playground

Explore and customize DatePicker themes in real-time

Select Theme

Current Theme: Default

Colors

Primary

Selected

Hover

Border

Border Radius

0.5rem

Font Family

-apple-system

DatePicker Preview

Basic DatePicker

With Time Selection

With Quick Select

DateRangePicker Preview

Date Range Selection

With Quick Select

Usage Example

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

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