open | boolean | false | Determines whether the calendar or picker is currently visible. |
value | Date | Moment | null | null | The currently selected date. |
initialDate | Date | Moment | null | null | The date the calendar initially focuses on when rendered. |
onSelect | (date: Date | null) => void | — | Callback fired when a date is selected. |
disablePortal | boolean | false | If true, renders the calendar/popover inline instead of using a portal. |
enableGoToToday | boolean | — | If true, displays a button that navigates the calendar to today’s date. |
hideFooter | boolean | — | Toggles visibility of the component’s footer. |
disableLocaleDigits | boolean | — | Forces numeric display to use English digits, even in locales like Arabic that default to locale-specific numerals (e.g. Hindi or Arabic-Indic). |
renderGoToToday | (onClick: () => void) => ReactNode | — | A function that returns a custom element for the “Go to Today” button. Receives an onClick handler to trigger the default behavior. |
renderConfirmBtn | (onClick: () => void) => ReactNode | — | A function that returns a custom element for the “OK” button. Receives an onClick handler to trigger the default behavior. |
disabledDatesFn | (date: Date) => boolean | — | Function to disable dates dynamically. |
mode | popover | inline | "popover" | Controls the calendar's display style: as a popover or inline element. |
theme | light | dark | "light" | Sets the calendar's color scheme to either light or dark mode. |
initialView | "day" | "month" | "year" | "day" | Determines which view is shown when the calendar first loads. |
views | "day" | "month" | "year" | "day" | Specifies which views users can switch between. Must include initialView. |
anchorEl | HTMLElement | null | null | The DOM element that serves as the anchor point for positioning the calendar. |
position | "top" | "right" | "bottom" | "left" | "start" | "end" | "top-right" | "top-left" | "top-start" | "top-end" | "bottom-right" | "bottom-left" | "bottom-start" | "bottom-end" | "bottom" | Specifies the calendar's placement relative to the anchor element. |
locale | string | "en" | Moment.js locale (e.g. "ar", "ar-sa", "en-gb"). |
format | string | "YYYY/MM/DD" | Specifies the format pattern used to display and interpret dates. |
calendar | gregorian | hijri | "gregorian" | Specifies the calendar system used for date calculations and display. |
onClose | () => void | — | Callback invoked when the calendar is closed (e.g., clicking outside or selecting a date). |
daysCalendarProps | DaysCalendarProps | — | An object containing props that customize the rendering and behavior of the days calendar view. |
monthsCalendarProps | MonthsCalendarProps | — | An object containing props that customize the rendering and behavior of the months calendar view. |
yearsCalendarProps | YearsCalendarProps | — | An object containing props that customize the rendering and behavior of the years calendar view. |
timePickerProps | TimePickerProps | — | An object containing props that customize the rendering and behavior of the time picker. |