[DateRanger ReactJs] plugins and config for date ranger picker on ReactJs #plugins #date #reactjs

DateFilter.js

import {DateRangePicker} from "react-date-range";
import {customInputRanges, staticCustomRanges} from "./DatePickerConfig";
import * as rdrLocales from "react-date-range/src/locale";
import React, {useState} from "react";
import {addDays} from "date-fns";

const DateFilter = () => {

    const [dateRange, updateDateRange] = useState({
        startDate: new Date(),
        endDate: addDays(new Date(), 7)

    });

    const handleRangeChange = (date) => {
        updateDateRange({
            startDate: date.range1.startDate,
            endDate: date.range1.endDate
        });
    };

    return <DateRangePicker
        onChange={handleRangeChange}
        showSelectionPreview={true}
        moveRangeOnFirstSelection={false}
        months={2}
        ranges={[dateRange]}
        direction="horizontal"
        staticRanges={staticCustomRanges}
        inputRanges={customInputRanges}
        locale={rdrLocales['es']}
    />
};

export default DateFilter;

DatePickerConfig.js

import {
    addDays,
    endOfDay,
    startOfDay,
    startOfMonth,
    startOfYear,
    endOfMonth,
    addMonths,
    startOfWeek,
    endOfWeek,
    isSameDay,
    differenceInCalendarDays,
} from 'date-fns';

const defined = {
    startOfWeek: startOfWeek(new Date()),
    endOfWeek: endOfWeek(new Date()),
    startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
    endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
    startOfToday: startOfDay(new Date()),
    endOfToday: endOfDay(new Date()),
    startOfYesterday: startOfDay(addDays(new Date(), -1)),
    endOfYesterday: endOfDay(addDays(new Date(), -1)),
    startOfMonth: startOfMonth(new Date()),
    endOfMonth: endOfMonth(new Date()),
    startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
    endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
    startOfLastYear: startOfYear(new Date()),
};

const staticRangeHandler = {
    range: {},
    isSelected(range) {
        const definedRange = this.range();
        return (
            isSameDay(range.startDate, definedRange.startDate) &&
            isSameDay(range.endDate, definedRange.endDate)
        );
    },
};

export function createStaticRanges(ranges) {
    return ranges.map(range => ({ ...staticRangeHandler, ...range }));
}

export const staticCustomRanges = createStaticRanges([
    {
        label: 'Hoy',
        range: () => ({
            startDate: defined.startOfToday,
            endDate: defined.endOfToday,
        }),
    },
    {
        label: 'Ayer',
        range: () => ({
            startDate: defined.startOfYesterday,
            endDate: defined.endOfYesterday,
        }),
    },

    {
        label: 'Esta semana',
        range: () => ({
            startDate: defined.startOfWeek,
            endDate: defined.endOfWeek,
        }),
    },
    {
        label: 'Última semana',
        range: () => ({
            startDate: defined.startOfLastWeek,
            endDate: defined.endOfLastWeek,
        }),
    },
    {
        label: 'Este mes',
        range: () => ({
            startDate: defined.startOfMonth,
            endDate: defined.endOfMonth,
        }),
    },
    {
        label: 'Último mes',
        range: () => ({
            startDate: defined.startOfLastMonth,
            endDate: defined.endOfLastMonth,
        }),
    },
    {
        label: 'Último año',
        range: () => ({
            startDate: defined.startOfLastYear,
            endDate: defined.endOfToday,
        }),
    }
]);

export const customInputRanges = [
    {
        label: 'días hasta hoy',
        range(value) {
            return {
                startDate: addDays(defined.startOfToday, (Math.max(Number(value), 1) - 1) * -1),
                endDate: defined.endOfToday,
            };
        },
        getCurrentValue(range) {
            if (!isSameDay(range.endDate, defined.endOfToday)) return '-';
            if (!range.startDate) return '∞';
            return differenceInCalendarDays(defined.endOfToday, range.startDate) + 1;
        },
    },
    {
        label: 'días desde hoy',
        range(value) {
            const today = new Date();
            return {
                startDate: today,
                endDate: addDays(today, Math.max(Number(value), 1) - 1),
            };
        },
        getCurrentValue(range) {
            if (!isSameDay(range.startDate, defined.startOfToday)) return '-';
            if (!range.endDate) return '∞';
            return differenceInCalendarDays(range.endDate, defined.startOfToday) + 1;
        },
    },
];

package.json

"dependencies": {
    "date-fns": "^1.30.1",
    "react-date-range": "^1.0.0-beta"
}