LEARN REACT CALENDAR >

Quick Start

Welcome to the React Calendar DateTime Picker documentation! This page will give you an introduction to 80% of the React Calendar concepts that you will use on a daily basis.

Basic Usage

The library provides two main components: `DtPicker` (a date picker with input field) and `DtCalendar` (a standalone calendar component).

Date Picker (DtPicker)

The DtPicker component includes an input field that opens a calendar modal when clicked:

import React, { useState } from 'react'
import { DtPicker } from 'react-calendar-datetime-picker'
import type { Day } from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/dist/style.css'

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

  return (
    <DtPicker
      initValue={date}
      onChange={setDate}
      placeholder="Select a date"
    />
  )
}

Standalone Calendar (DtCalendar)

The DtCalendar component provides a calendar without an input field:

import React, { useState } from 'react'
import { DtCalendar } from 'react-calendar-datetime-picker'
import type { Day } from 'react-calendar-datetime-picker'
import 'react-calendar-datetime-picker/dist/style.css'

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

  return (
    <DtCalendar
      initValue={date}
      onChange={setDate}
    />
  )
}

Calendar Types

The library supports different selection modes:

Single Date Selection

<DtPicker
  type="single"
  onChange={setDate}
/>

Date Range Selection

<DtPicker
  type="range"
  onChange={setDateRange}
/>

Multiple Date Selection

<DtPicker
  type="multi"
  onChange={setMultipleDates}
/>

Week Selection

<DtPicker
  type="week"
  onChange={setWeek}
/>

Calendar Locales

Choose between Gregorian (English) and Jalali (Persian) calendars:

Gregorian Calendar

<DtPicker
  calendarSystem="gregorian"
  onChange={setDate}
/>

Jalali (Persian) Calendar

<DtPicker
  calendarSystem="jalali"
  onChange={setDate}
/>

Note: When using Persian locale (fa), make sure to include the Persian fonts in your project for proper display.

Time Selection

Enable time selection with customizable format:

<DtPicker
  withTime={true}
  dateFormat="YYYY-MM-DD HH:mm"
  onChange={setDateTime}
/>

Date Constraints

Restrict selectable dates using constraints:

<DtPicker
  constraints={{
    minDate: new Date(),
    maxDate: new Date(2025, 11, 31),
    disabledDates: [
      new Date(2024, 11, 25),
      new Date(2024, 11, 26)
    ]
  }}
  onChange={setDate}
/>

Important: When using JavaScript's `Date` object (e.g., in constraints), remember that months are 0-indexed (January is 0, December is 11). However, the library's `Day` object uses 1-indexed months (January is 1, December is 12).

Next Steps

Install the package and learn about date value formats
Understand data types and how dates are structured
View interactive examples to see the component in action
Check the API reference for detailed prop documentation
Learn about customization options for theming and styling
Read about accessibility features for inclusive design

Tip: All examples in this documentation are interactive. You can modify the props and see the changes in real-time.