React-trip-date-arron NPM

downloads dependencies dev dependencies

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!

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:

Contributors

feel free to contribute.

License

The GNU GPLv3 License.

react-trip-date

@infinitebrahmanuniverse/nolb-react-tr @everything-registry/sub-chunk-2619

0.0.5

4 years ago

0.0.4

4 years ago