react-trip-date
react-trip-date copied to clipboard
samsam-ahmadi
It's a fully customizable Date/Range picker for ReactJS.
trafficstars
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 needmoment.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.gitcd react-trip-dateyarn && 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:
Contributors
feel free to contribute.
License
The GNU GPLv3 License.
Metadata
58
Stars
12
Forks
Watchers
Owner
samsam-ahmadi
Metadata
It's a fully customizable Date/Range picker for ReactJS.