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
buttonSize	size of header buttons	10px	30px
dayHeight	height of days	40px	30px
headerTextColor	color of month name text in header	#fff	#000
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>
LeftButtonComponent	custom left button component	n/a	Button = () =><p> > </p>
RightButtonComponent	custom right button component	n/a	Button = () =><p> < </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
buttonSize	size of header buttons	10px	30px
selectedRadius	radius of selected days box	25px	5px
dayHeight	height of days	40px	30px
rangeHeight	height of selected range	40px	30px
selectedColor	background color of selected days	#fff	#000
selectedEndColor	background color of end selected day	#fff	#000
selectedStartColor	background color of start selected day	#fff	#000
selectedTextColor	text color of selected days	#fff	#000
selectedTextEndColor	text color of selected days	#fff	#000
selectedTextStartColor	text color of selected days	#fff	#000
headerTextColor	color of month name text in header	#fff	#000
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>
LeftButtonComponent	custom left button component	n/a	Button = () =><p> > </p>
RightButtonComponent	custom right button component	n/a	Button = () =><p> < </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.