React-Trip-Date ·

A fully customizable Date/Range picker for your React applications.

• Theme (Compatible with your Material-UI theme ), Multiple Month, Auto Responsive
• Support Jalali & Gregorian
• Using Day.js (2KB immutable date and NO more need moment.js)

Demo

Online demo is also available! you can run demo on your local with:

• git clone https://github.com/samsam-ahmadi/react-trip-date.git
• cd react-trip-date
• yarn && yarn storybook
• Visit http://localhost:9009/

Getting started

Compatibility

Your project needs to use React 16 or later. If you use older version of React.

Installation

npm install react-trip-date

yarn add react-trip-date

User guide

DatePicker

Props

Prop name	Description	Default value	Example values
onChange	this function return an array of days	n/a	(days:string[]) => console.log('selected days',days)
selectedDays	the initial array of days	[]	['2019-10-01','2019-11-06']
jalali	choice jalali or gregorian calendar	false	false/true
startOfWeek	the first day of the week (0 for Sunday - 6 for Saturday)	0	6
numberOfMonths	number of months you need to show	1	7
initialMonthAndYear	the initial month and year to start visible calendar on	Current m/y	2020-02
onRangeDateInScreen	called whenever the visible dates change for any reason	n/a	(window: {start: string, end: string}) => console.log(window)
numberOfSelectableDays	number of days you need	0/infinity	3
disabledDays	the disabled days that you don't want clickable to choice	[]	['2019-11-04',2019-12-14]
autoResponsive	makes your calendar responsive but you can handle it by your self by change the numberOfMonths	true	false/true
disabledBeforeToday	disabled days before today	false	true/false
disabledBeforeDate	disabled before this day	undefined	2019-03-04
disabledAfterDate	disabled after this day	undefined	2019-11-04
disabled	disabled calendar	false	true/false
components	update header title, icons, week title (titles array always starting Sunday) and day component	undefined	{days?: ElementType<{day:string;jalali: boolean;}>;header?: {format?: string;monthIcons?: {right: ReactNode;left: ReactNode;};yearIcons?: {right: ReactNode;left: ReactNode;};};titleOfWeek?:{titles?: string[];wrapper?: ElementType<{ jalali: boolean }>;};}

RangePicker

Props

Prop name	Description	Default value	Example values
onChange	this function return an array of days	n/a	(days:string[]) => console.log('selected days',days)
selectedDays	the initial range date	{from:'',to:''}	{from:'2019-12-12',to:'2019-12-18'}
jalali	choice jalali or gregorian calendar	false	false/true
startOfWeek	the first day of the week (0 for Sunday - 6 for Saturday)	0	6
numberOfMonths	number of months you need to show	1	7
initialMonthAndYear	the initial month and year to start visible calendar on	Current m/y	2020-02
onRangeDateInScreen	called whenever the visible dates change for any reason	n/a	(window: {start: string, end: string}) => console.log(window)
disabledDays	the disabled days that you don't want clickable to choice	[]	['2019-11-04',2019-12-14]
allowDisabledDaysSpan	To Allow select the disable days between two valid dates	false	true/false
autoResponsive	makes your calendar responsive but you can handle it by your self by change the numberOfMonths	true	false/true
disabledBeforeToday	disabled days before today	false	true/false
disabledBeforeDate	disabled before this day	undefined	2019-03-04
disabledAfterDate	disabled after this day	undefined	2019-11-04
disabled	disabled calendar	false	true/false
components	update header title, icons, week title (titles array always starting Sunday) and day component	undefined	{days?: ElementType<{day:string;jalali: boolean;}>;header?: {format?: string;monthIcons?: {right: ReactNode;left: ReactNode;};yearIcons?: {right: ReactNode;left: ReactNode;};};titleOfWeek?:{titles?: string[];wrapper?: ElementType<{ jalali: boolean }>;};}

special thanks to:

• @amiiiirhassan
• @mpourismaiel
• @salehbud

Contributors

feel free to contribute.

License

The GNU GPLv3 License.