# DatePicker Simple React datepicker component for working with `gregorian`, `persian`, `arabic` and `indian` calendars with the ability to select the date in `single`, `multiple` and `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 install --save 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 (none react-app) ```html React Multi Date Picker Calendar Example :
DatePicker Example :
Plugins Example :
``` ## Availble 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
onOpen Function DatePicker
onClose Function DatePicker
onPropsChange Function both
onMonthChange Function both
onYearChange Function both
onFocusedDateChange Function both
onPositionChange Function DatePicker
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
containerClassName String DatePicker
arrowClassName String 0 DatePicker
style React.CSSProperties {} 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
# 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
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 the both 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)