# react-multi-date-picker > A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers. Latest version **4.5.2** (published 2024-06-15) · MIT license · 0 weekly downloads ## Install ```sh npm install react-multi-date-picker pnpm add react-multi-date-picker yarn add react-multi-date-picker bun add react-multi-date-picker ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 4.5.2 | | Published | 2024-06-15 | | First published | 2020-08-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 358.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 990 | | Author | Shahab Yazdi | | Maintainers | shahabyazdi | | Keywords | react, multi, date, picker, datepicker, rangepicker, weekpicker, timepicker, date picker, range picker, time picker, week picker, multiple, range, time, week, gregorian, calendar, persian, jalali, hijri, indian, farsi, arabic, english, hindi, locales, datetime, component | ## Links - npm: https://www.npmjs.com/package/react-multi-date-picker - Repository: https://github.com/shahabyazdi/react-multi-date-picker - Homepage: https://shahabyazdi.github.io/react-multi-date-picker/ - Issues: https://github.com/shahabyazdi/react-multi-date-picker/issues - npm.io page: https://npm.io/package/react-multi-date-picker ## Dependencies (2) - [react-date-object](https://npm.io/package/react-date-object.md) ^2.1.8 - [react-element-popper](https://npm.io/package/react-element-popper.md) ^2.1.6 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 4.5.2 (latest) — 2024-06-15 - 3.0.0-dev.1 (dev) — 2021-07-15 - 4.5.1 — 2024-05-18 - 4.5.0 — 2024-05-15 - 4.4.1 — 2023-10-28 - 4.4.0 — 2023-10-21 - 4.3.6 — 2023-10-21 - 4.3.5 — 2023-10-14 - 4.3.4 — 2023-10-14 - 4.3.3 — 2023-10-03 - 4.3.2 — 2023-09-30 - 4.3.1 — 2023-09-09 - 4.3.0 — 2023-09-09 - 4.2.4 — 2023-09-08 - 4.2.3 — 2023-09-08 - … 127 more at https://npm.io/package/react-multi-date-picker/versions ## README # DatePicker Simple React datepicker component for working with `gregorian`, `persian`, `arabic` and `indian` calendars with the ability to select the date in `single`, `multiple`, `range` and `multiple range` modes.
date picker
# Layouts You can change the appearance of the datepicker to `prime` or `mobile` by importing css files from the styles folder.
date picker layouts
# Plugins Ability to further customize the calendar and datepicker by adding one or more plugins.
date picker plugins all in one
## Installation ```code npm i react-multi-date-picker ``` ## Demo - **[DatePicker & Calendar](https://shahabyazdi.github.io/react-multi-date-picker/)** - [Multiple Date Picker](https://shahabyazdi.github.io/react-multi-date-picker/multiple/) - [Range Picker](https://shahabyazdi.github.io/react-multi-date-picker/range/) - [Time Picker & Other Pickers](https://shahabyazdi.github.io/react-multi-date-picker/other-pickers/) - [FullYear Picker](https://shahabyazdi.github.io/react-multi-date-picker/other-examples/#full-year-view) - [Locales](https://shahabyazdi.github.io/react-multi-date-picker/locales/) - **[Plugins](https://shahabyazdi.github.io/react-multi-date-picker/plugins)** - [Date Panel](https://shahabyazdi.github.io/react-multi-date-picker/plugins/panel/) - [Multiple Time Picker](https://shahabyazdi.github.io/react-multi-date-picker/plugins/time-picker/) - [Analog Time Picker](https://shahabyazdi.github.io/react-multi-date-picker/plugins/analog-time-picker/) - [Toolbar](https://shahabyazdi.github.io/react-multi-date-picker/plugins/toolbar/) - [Range Picker Footer](https://shahabyazdi.github.io/react-multi-date-picker/plugins/range-picker-footer/) - **[آموزش نصب و راه اندازی دیت پیکر به فارسی](https://shahabyazdi.github.io/react-multi-date-picker/fa)** ## Usage ```javascript import React, { useState } from "react"; import DatePicker from "react-multi-date-picker"; export default function Example() { const [value, setValue] = useState(new Date()); return ; } ``` ## Browser (non react-app) ```html React Multi Date Picker Calendar Example :
DatePicker Example :
Plugins Example :
``` ## Available props
Name Type Default Availability (DatePicker/ Calendar)
value Date, DateObject , String, Number or Array new Date() both
ref React.RefObject both
multiple Boolean false (true if value is Array) 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 "," for LTR locales, "،" for RTL locales 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 '~' in range mode, ',' in multiple mode DatePicker
multipleRangeSeparator String ',' DatePicker
typingTimeout String 700 DatePicker
autoFocus Boolean false Calendar
# Calendars & Locales Click [here](https://shahabyazdi.github.io/react-multi-date-picker/calendars) to see the descriptions.
Calendars Gregorian Persian (Solar Hijri) Jalali Arabic (Lunar Hijri) Indian
/calendars/gregorian /calendars/persian /calendars/jalali /calendars/arabic /calendars/indian
Locales English /locales/gregorian_en /locales/persian_en /locales/persian_en /locales/arabic_en /locales/indian_en
Portuguese - BRAZIL /locales/gregorian_pt_br - - - -
Farsi /locales/gregorian_fa /locales/persian_fa /locales/persian_fa /locales/arabic_fa /locales/indian_fa
Arabic /locales/gregorian_ar /locales/persian_ar /locales/persian_ar /locales/arabic_ar /locales/indian_ar
Hindi /locales/gregorian_hi /locales/persian_hi /locales/persian_hi /locales/arabic_hi /locales/indian_hi

Of course, you can customize the names of the months and days of the week in both the calendar & input by using the `months` and `weekDays` Props. Also, you can create a custom Calendar and Locale: - [Creating a custom Calendar](https://shahabyazdi.github.io/react-multi-date-picker/calendars/#custom-calendar) - [Creating a custom Locale](https://shahabyazdi.github.io/react-multi-date-picker/locales/#custom-locale) --- _Source: https://npm.io/package/react-multi-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._