API Reference

Complete API documentation for all components, props, and types.

DatePicker

A modern, customizable date picker component with support for time selection, multiple formats, and 11 languages.

Prop	Type	Default	Description
value	Date \| null	-	Selected date value
onChange	(date: Date \| null) => void	-	Callback 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
showTime	boolean	false	Show time selection
format	string	"DD/MM/YYYY"	Date format (DD/MM/YYYY, MM/DD/YYYY, YYYY-MM-DD, etc.)
language	Language	"en"	Language (en, tr, de, fr, es, it, pt, ru, ja, zh, ar)
showQuickSelect	boolean	false	Show quick date selection options
showWeekNumbers	boolean	false	Show ISO week numbers
usePortal	boolean	false	Use React Portal for calendar rendering
className	string	""	Additional CSS classes
customDays	CustomDay[]	[]	Custom day configurations (labels, colors, disabled)
initialMonth	Date	new Date()	Initial month to display

Example

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

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

  return (
    <DatePicker
      value={date}
      onChange={setDate}
      showTime={true}
      language="en"
      format="DD/MM/YYYY"
    />
  );
}

DateRangePicker

A date range picker component with two-month view and quick range selection options.

Prop	Type	Default	Description
startDate	Date \| null	-	Start date value
endDate	Date \| null	-	End date value
onChange	(start: Date \| null, end: Date \| null) => void	-	Callback when dates change
minDate	Date	undefined	Minimum selectable date
maxDate	Date	undefined	Maximum selectable date
disabled	boolean	false	Disable the picker
language	Language	"en"	Language selection
showQuickSelect	boolean	false	Show quick range selection options

Example

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

function Example() {
  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);
      }}
      showQuickSelect={true}
      language="en"
    />
  );
}

Types & Interfaces

Language

type Language = 'en' | 'tr' | 'de' | 'fr' | 'es' | 'it' | 'pt' | 'ru' | 'ja' | 'zh' | 'ar';

CustomDay

interface CustomDay {
  date: Date;
  label?: string;
  className?: string;
  color?: string;
  disabled?: boolean;
}