react-date-range-divider

A react component for divide a date interval into equally distributited intervals at a day level.

Installation

npm i react-date-range-divider --save

Usage

Quick Examples

import { DateRangeDivider, IMiddleDateInterval } from 'react-date-range-divider';
const FooComponent = () => {
    const [intervals, setIntervals] = useState<IMiddleDateInterval[]>([]);
    const numOfDivisios = 2;
    const startDate = new Date("2020/05/11"); // YYYY/MM/DD 
    const endDate = new Date("2020/05/15");  // YYYY/MM/DD 
    return (
        <DateRangeDivider
            divisions={numOfDivisios}
            startDate={startDate}
            endDate={endDate}
            onDivisionsChange={(resultIntervals: IMiddleDateInterval[]) => {
                // Do what you need with intervals
                setIntervals(() => resultIntervals);
            }}
        />
    )
};

Warning

Since it divides in entire days a non possible Int division (with no decimals in result) will aproximate the first interval to the next day. In this case the result will be:

• 11/05/2020 - 00:00:00 => 13/05/2020 - 23:59:59 (3 days including start and end)
• 14/05/2020 - 00:00:00 => 14/05/2020 - 23:59:59 (2 days including start and end)

5 days in total from 11/05/2020 - 15/05/2020. (DD/MM/YYYY)

calcRegularIntervals Function

If only need to divide intervals without the component, the function can be imported alone.

import { calcRegularIntervals, IMiddleDateInterval } from 'react-date-range-divider';

const startDate = new Date("2020/05/11"); // YYYY/MM/DD 
const endDate = new Date("2020/05/15");  // YYYY/MM/DD 
const numOfDivisios = 2;

const intervals: IMiddleDateInterval[] = calcRegularIntervals(startDate, endDate, numOfDivisios); // number to divide is 1 by default

Documentation

Import

import { DateRangeDivider } from 'react-date-range-divider';

Error Handler

By passing a endDate lower than the startDate or giving a divisionNumber higher than the number of days in between parent interval, the component will use the current day divided in one

Props

| Name | Type | Description | | :---------: | :----------------------------------------: | :-----------------------------------: | | divisions | number | Number of division desired of the given period (If this number is higher than the number of days available in the period will take 1 as default) | | startDate | Date | Start date of the parent interval (will convert to the beggining of the passes day. ex: 2020/05/14:12:14:00 => 2020/05/14-00:00:00) | | | endDate | Date | Finish Date of the parent interval (will convert to the beggining of the passes day. ex: 2020/05/14:12:14:00 => 2020/05/14-23:59:59) | | | onDivisionsChange | (intervals: IMiddleDateInterval[]) => void | callback that passes the resultant intervals as argument |

Types

| Name | Type | Description | | :---------------------: | :-----------------------------: | :-----------------------------------: | | IMiddleDateInterval | {start: Date, end: Date} | Dates resultant of division calculus |