React Calendar DateTime Picker
The library for web and native user interfaces with comprehensive calendar support
Supports Jalali (Persian) and Gregorian calendar systems with single, range, multi-date, and week selection modes.
Basic Light Calendar (EN)
A simple calendar component with light theme and English locale
Basic Dark Calendar (FA)
A calendar component with dark theme and Persian (Jalali) locale
Create user interfaces from components
React Calendar DateTime Picker lets you build date and time selection interfaces out of individual pieces called components. Create your own calendar components like DtPicker,DtCalendar, andDateRange. Then combine them into entire screens, pages, and apps.
New Features in v2.x
Discover the enhanced capabilities and improvements in the latest version
Dual Calendar Support
Native support for both Gregorian and Jalali (Persian) calendars with automatic locale handling and seamless switching.
Flexible Selection Modes
Single date, date range, multi-date, and week selection modes to accommodate various use cases and workflows.
Comprehensive onChange Output
Enhanced onChange callback provides three parameters: normalized Day object, JavaScript Date (always Gregorian), and formatted string for maximum flexibility and developer convenience.
Time Selection Support
Full time picker integration with 12-hour and 24-hour formats, supporting hours and minutes for precise datetime input.
Preset Date Ranges
Built-in preset buttons for common ranges (Yesterday, Last 7/30 days, This/Last month) with support for custom presets.
Advanced Constraints
Set minimum and maximum dates, disable specific dates, and use custom validation functions for precise date control.
Multiple Months Display
Display multiple calendar months side by side for better range selection and improved user experience.
Week Customization
Customize week start day (Sunday-Saturday), weekend highlighting, and weekday names for different regional preferences.
Enhanced TypeScript Support
Better type definitions, improved IntelliSense, and stricter type checking for a more robust development experience.
CSS Variables Support
Easy theming with CSS custom properties for colors and styling, enabling seamless theme integration and customization.
Dark Mode Support
Built-in dark theme with automatic detection and seamless integration with your application theme.
Internationalization (i18n)
Full locale support for English, Persian, German, Spanish, and French with RTL support, custom translations, and localized formatting.
Extended Utility Functions
Comprehensive date manipulation utilities for complex use cases, calendar conversions, and advanced date operations.
Better Performance
Optimized rendering, memoization, and reduced bundle size for faster loading and smoother interactions.
Enhanced Customization
Custom icons, labels, translations, CSS classes, and component styling to match your exact design requirements.
Rich Event System
Comprehensive callback system for date selection, month/year navigation, view changes, and user interactions.
Custom Trigger Elements
Use any React element as a trigger for the date picker, enabling complete control over input styling and behavior.
Improved Accessibility
Full keyboard navigation, ARIA labels, focus management, and screen reader support for WCAG 2.1 Level AA compliance.
Input-less Mode
Display standalone calendars without input fields for embedded scenarios, dashboards, and custom UI designs.
Smart Modal Positioning
Intelligent modal positioning that automatically adjusts above or below based on available viewport space, handles RTL/LTR layouts, and dynamically repositions on window resize and scroll for optimal user experience.
Comprehensive Error Handling & Validation
Robust error handling system in both DtCalendar and DtPicker with onError callback for tracking normalization and validation errors. Handles invalid dates, constraint violations, and provides detailed error information with field names and messages for debugging.