repository·master·Indexed 21 days ago
https://github.com/shahabyazdi/react-multi-date-pickerA React datepicker component supporting Gregorian, Persian, Arabic, and Indian calendars. It features single, multiple, range, and multiple range selection modes, and includes a standalone Calendar component. The library supports various locales, customizable layouts (prime and mobile), and a plugin system for extending functionality with headers, toolbars, or time pickers.
DatePicker component supports customization through plugins. You can pass an array of plugins to the plugins prop to add features like headers, toolbars, or time pickers.The react-multi-date-picker supports multiple calendar systems and locales. You can specify the calendar type and the language/locale for the UI elements (months, days, etc.).
Supported Calendars:
Supported Locales include:
Customization:
months and weekDays props.To run the Gatsby-based demo page for the DatePicker, clone the repository, install dependencies for both the root project and the website directory, build the project, and then start the Gatsby development server.
git clone https://github.com/shahabyazdi/react-multi-date-picker.git
cd react-multi-date-picker
npm install
npm run build
cd website
npm install
gatsby developstyles folder. Supported layouts include prime and mobile.If you are not using a React build system, you can include the library via CDN. You must include react, react-dom, date-object, and react-element-popper before the react-multi-date-picker script. The components are available under the ReactMultiDatePicker global object.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React Multi Date Picker</title>
</head>
<body>
<div id="calendar"></div>
<div id="datePicker"></div>
<div id="datePickerWithPlugin"></div>
<!-- React dependencies -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!-- DatePicker and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/date-object@latest/dist/umd/date-object.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-element-popper@latest/build/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/browser.min.js"></script>
<!-- Optional Plugin -->
<script src="https://cdn.jsdelivr.net/npm/react-multi-date-picker@latest/build/date_picker_header.browser.js"></script>
<script>
const { DatePicker, Calendar } = ReactMultiDatePicker;
ReactDOM.render(
React.createElement(Calendar),
document.getElementById("calendar")
);
ReactDOM.render(
React.createElement(DatePicker),
document.getElementById("datePicker")
);
ReactDOM.render(
React.createElement(DatePicker, {
plugins: [React.createElement(DatePickerHeader)],
}),
document.getElementById("datePickerWithPlugin")
);
</script>
</body>
</html>To use this component in your React project, install the package using npm:
npm i react-multi-date-pickerTo implement a basic date picker, import the DatePicker component and manage its state using useState. Pass the current date to the value prop and the state setter to the onChange prop.
import React, { useState } from "react";
import DatePicker from "react-multi-date-picker";
export default function Example() {
const [value, setValue] = useState(new Date());
return <DatePicker value={value} onChange={setValue} />;
}The DatePicker and Calendar components accept a wide range of props to control behavior, appearance, and data handling.
DatePicker and Calendar)value: The selected date(s). Accepts Date, DateObject, String, Number, or Array.multiple: Boolean. Set to true if value is an Array to enable multiple selection.range: Boolean. Enables range selection.format: String. The date format (default: YYYY/MM/DD).calendar: Object. The calendar system (e.g., gregorian).locale: Object. The locale configuration (e.g., gregorian_en).onChange: Function. Callback triggered when the date changes.minDate / maxDate: Limits the selectable date range.plugins: Array. An array of plugins to extend functionality.numberOfMonths: Number. How many months to display (default: 1).disabled: Boolean. Disables the component.readOnly: Boolean. Makes the component read-only.These props are exclusive to the DatePicker component (the input/popover version):
onOpen / onClose: Callbacks for when the picker opens or closes.containerClassName / containerStyle: Styling for the picker container.arrow: Boolean or React.ReactElement. Controls the visibility/content of the picker arrow.calendarPosition: String. Position of the calendar (e.g., "bottom-left").portal: Boolean. If true, renders the picker in a portal.portalTarget: HTMLElement. The target element for the portal.placeholder: String. Input placeholder text.dateSeparator: String. Separator used in range mode ('~') or multiple mode (,).multipleRangeSeparator: String. Separator for multiple ranges (default: ',').typingTimeout: String. Timeout for typing (default: 700).months and weekDays props. This allows for manual overrides of the default locale strings.Full enumeration of available props for the DatePicker and Calendar components.
| Name | Type | Default | Availability |
| :--- | :--- | :--- | :--- |
| `value` | Date, DateObject, String, Number or Array | `new Date()` | both |
| `ref` | React.RefObject | | both |
| `multiple` | Boolean | `false` | both |
| `range` | Boolean | `false` | both |
| `onlyMonthPicker` | Boolean | `false` | both |
| `onlyYearPicker` | Boolean | `false` | both |
| `format` | String | `YYYY/MM/DD` | both |
| `formattingIgnoreList` | Array | | both |
| `calendar` | Object | `gregorian` | both |
| `locale` | Object | `gregorian_en` | both |
| `mapDays` | Function | | both |
| `onChange` | Function | | both |
| `onPropsChange` | Function | | both |
| `onMonthChange` | Function | | both |
| `onYearChange` | Function | | both |
| `onFocusedDateChange` | Function | | both |
| `digits` | Array | | both |
| `weekDays` | Array | | both |
| `months` | Array | | both |
| `showOtherDays` | Boolean | `false` | both |
| `minDate` | Date, DateObject, String or Number | | both |
| `maxDate` | Date, DateObject, String or Number | | both |
| `disableYearPicker` | Boolean | `false` | both |
| `disableMonthPicker` | Boolean | `false` | both |
| `disableDayPicker` | Boolean | `false` | both |
| `zIndex` | Number | `100` | both |
| `plugins` | Array | `[]` | both |
| `sort` | Boolean | `false` | both |
| `numberOfMonths` | Number | `1` | both |
| `currentDate` | DateObject | | both |
| `buttons` | Boolean | `true` | both |
| `renderButton` | React.ReactElement or Function | | both |
| `weekStartDayIndex` | Number | | both |
| `className` | String | | both |
| `readOnly` | Boolean | `false` | both |
| `disabled` | Boolean | `false` | both |
| `hideMonth` | Boolean | `false` | both |
| `hideYear` | Boolean | `false` | both |
| `hideWeekDays` | Boolean | `false` | both |
| `shadow` | Boolean | `true` | both |
| `fullYear` | Boolean | `false` | both |
| `displayWeekNumbers` | Boolean | `false` | both |
| `weekNumber` | String | | both |
| `weekPicker` | Boolean | `false` | both |
| `rangeHover` | Boolean | `false` | both |
| `monthYearSeparator` | String | "," or "،" | both |
| `formatMonth` | Function | `undefined` | both |
| `formatYear` | Function | `undefined` | both |
| `highlightToday` | Boolean | `true` | both |
| `style` | React.CSSProperties | `{}` | both |
| `headerOrder` | Array | `["LEFT_BUTTON", "MONTH_YEAR", "RIGHT_BUTTON"]` | both |
| `onOpen` | Function | | DatePicker |
| `onClose` | Function | | DatePicker |
| `onPositionChange` | Function | | DatePicker |
| `containerClassName` | String | | DatePicker |
| `arrowClassName` | String | `0` | DatePicker |
| `containerStyle` | React.CSSProperties | | DatePicker |
| `arrowStyle` | React.CSSProperties | `0` | DatePicker |
| `arrow` | Boolean or React.ReactElement | `true` | DatePicker |
| `animations` | Array | `false` | DatePicker |
| `inputClass` | String | | DatePicker |
| `name` | String | | DatePicker |
| `id` | String | | DatePicker |
| `title` | String | | DatePicker |
| `required` | Boolean | | DatePicker |
| `placeholder` | String | | DatePicker |
| `render` | React.ReactElement or Function | | DatePicker |
| `inputMode` | String | | DatePicker |
| `scrollSensitive` | Boolean | `true` | DatePicker |
| `hideOnScroll` | Boolean | `false` | DatePicker |
| `calendarPosition` | String | `"bottom-left"` | DatePicker |
| `editable` | Boolean | `true` | DatePicker |
| `onlyShowInRangeDates` | Boolean | `true` | DatePicker |
| `fixMainPosition` | Boolean | `false` | DatePicker |
| `fixRelativePosition` | Boolean | `false` | DatePicker |
| `offsetY` | Number | `0` | DatePicker |
| `offsetX` | Number | `0` | DatePicker |
| `mobileLabels` | Object | | DatePicker |
| `portal` | Boolean | | DatePicker |
| `portalTarget` | HTMLElement | | DatePicker |
| `onOpenPickNewDate` | Boolean | `true` | DatePicker |
| `mobileButtons` | HTMLButtonElement[] | `[]` | DatePicker |
| `dateSeparator` | String | `'~'` or `','` | DatePicker |
| `multipleRangeSeparator` | String | `','` | DatePicker |
| `typingTimeout` | String | `700` | DatePicker |
| `autoFocus` | Boolean | `false` | Calendar |The Calendar component is exported for use as a standalone calendar UI, separate from the full DatePicker wrapper.
import { Calendar } from 'react-multi-date-picker';The library provides two utility functions for date manipulation:
getAllDatesInRange: Returns an array of all dates within a specified range.toDateObject: Converts a given value into a DateObject instance.import { getAllDatesInRange, toDateObject } from 'react-multi-date-picker';