Skip to content

Latest commit

 

History

History
92 lines (66 loc) · 14.6 KB

README.md

File metadata and controls

92 lines (66 loc) · 14.6 KB

React-Trip-Date · npm downloads

Demo for 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:

Contributors

feel free to contribute.

License

The GNU GPLv3 License.