## This is forked version of react-multi-date-picker. ## And modified by itpsolver for personal use. --- ### 테스트 방법 - 이 프로젝트는 website 라는 프로젝트(온라인 매뉴얼, 샘플 페이지)가 포함되어 있다. - website의 런칭 방법은 다음과 같다. - 라이브러리 빌드 - 빌드명령: npm run build - 웹사이트 - cd website - 서버실행: npm start - 메인 페이지: http://localhost:8000 - 테스트 페이지(임시): http://localhost:8000/test - 커스터마이징 - 웹사이트를 실행시킨 상태에서 라이브러리를 수정하고, 라이브러리 빌드를 통해 hmr을 수행하며 테스트 해 보자. --- # 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 "@itpsolver/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
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
mobileButtons HTMLButtonElement[] [] 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 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)