react-trip-date-arron

React-Trip-Date

A date/range picker for your React applications. it was a package for Tripema.com

• Multiple Month, Custom Responsive, Number Of Selectable Days
• Range Picker, Hoverable, Theme base
• Support Jalali & Gregorian
• Use Day.js (2KB immutable date and NO moment.js is needed)
• Bundle size, 30kB (minified + GZipped 9.2 kB)

Demo

Online demo is also available!

OR

To run that demo on your own computer:

• Clone this repository
• yarn install
• yarn start
• Visit http://localhost:6006/

Getting started

Compatibility

Your project needs to use React 16 or later. If you use older version of React, please refer to the table below to find suitable React-Trip-Date version.

Installation

Add React-Trip-Date to your project by executing npm install react-trip-date or yarn add react-trip-date

if you don't installed styled-components and classnames, you need to install them. npm install styled-components classnames or yarn add styled-components classnames

Usage

Here's an example of basic usage:

import React, { Component } from 'react';
import { DatePicker, RangePicker, theme } from 'react-trip-date';
import {ThemeProvider} from 'styled-components';
const  handleResponsive  =  setNumberOfMonth  =>  {
    let  width  =  document.querySelector('.tp-calendar').clientWidth;
    if  (width  >  900)  {
        setNumberOfMonth(3);
    }  else  if  (width  <  900  &&  width  >  580)  {
        setNumberOfMonth(2);
    }  else  if  (width  <  580)  {
        setNumberOfMonth(1);
    }
};
 
const  Day = ({  day  }) => {
    return  (
        <>
            <p  className="date">{day.format('DD')}</p>
            <p  className="date">7</p>
        </>
        );
    };
    
class MyApp extends Component {
 
  onChange = date => console.log(date)
 
  render() {
    return (
      <ThemeProvider theme={theme}>
        <DatePicker
          handleChange={onChange}
          selectedDays={['2019-11-06']} //initial selected days
          jalali={false}
          numberOfMonths={3}
          numberOfSelectableDays={3} // number of days you need 
          disabledDays={['2019-12-02']} //disabeld days
          responsive={handleResponsive} // custom responsive, when using it, `numberOfMonths` props not working
          disabledBeforToday={true} 
          disabled={false} // disable calendar 
          dayComponent={Day} //custom day component 
          titleComponent={Title} // custom title of days
        />
      </ThemeProvider>
    );
  }
}

Custom styling

If you don't want to use default React-Trip-Date styling to build upon it, you can import theme by using import { theme } from 'react-trip-date instead and custom it.

User guide

DatePicker

Props

Prop name	Description	Default value	Example values
handleChange	is a function that return an array of days	n/a	(days) => 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
numberOfMonths	number of months you need	1	2
numberOfSelectableDays	number of days you need	0/Infiniti	3
disabledDays	the disabled days that you don't want clickable	[]	['2019-11-04',2019-12-14]
responsive	custom responsive is function and have a argument for change number of month, when using it, numberOfMonths props not working		(setNumberOfMonth => setNumberOfMonth(3))
disabledBeforToday	disabled days before today	true	true/false
disabled	disabled date picker	false	true/false
dayComponent	custom day component	n/a	Day = ({ day }) =><p>{day.format('DD')}</p>
titleComponent	custom title of days week	n/a	const Title=({source })=>{let titleDay = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']return ({titleDay.map(item=>(<p key={Math.random()}>{item}</p>))})}

RangePicker

Props

Prop name	Description	Default value	Example values
handleChange	is a function that return an array of days	n/a	(days) => 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
numberOfMonths	number of months you need	1	2
hoverable	change range date when user hover day	true	true/false
disabledDays	the disabled days that you don't want clickable	[]	['2019-11-04',2019-12-14]
responsive	custom responsive is function and have a argument for change number of month, when using it, numberOfMonths props not working	n/a	(setNumberOfMonth => setNumberOfMonth(3))
disabledBeforToday	disabled days before today	true	true/false
disabled	disabled date picker	false	true/false
dayComponent	custom day component	n/a	Day = ({ day }) =><p>{day.format('DD')}</p>
titleComponent	custom title of days week	n/a	const Title=({source })=>{let titleDay = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']return ({titleDay.map(item=>(<p key={Math.random()}>{item}</p>))})}

special thanks to:

• @amiiiirhassan
• @mpourismaiel

Contributors

feel free to contribute.

License

The GNU GPLv3 License.