EVENT ON ant-calendar-prev-month-btn && ant-calendar-next-month-btn (range date picker)

[Afondevi]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

It's actualy impossible to get the click on ant-calendar-prev-month-btn and ant-calendar-next-month-btn button on date picker range.
Really need this

What does the proposed API look like?

It's actualy impossible to get the click on ant-calendar-prev-month-btn and ant-calendar-next-month-btn button on date picker range.
Really need this

[scottrotton]

I also need this

[ClemensPaumgarten]

I would also really need this 👍

Are there any changes on this topic so far?

[ClemensPaumgarten]

I would also really need this 👍

Are there any changes on this topic so far?

Since I couldn't find any new updates on this topic, I did some changes on my implementation.
I added click events on the next / prev months / year buttons and tracked the currently displayed months (left and right month). On every click the first of the months are passed to an event handler (onPanelChange). This way I can load additional data for the currently displayed days. This is not a perfect solution as I break the React event circle and it will come to problems once I use more than one DateRangePickers at once. However, for my current use case it works fine.

I'm using:
react : v17.0.1
moment: v2.29.1
antd: v4.12.2

I really like the RangePicker from antd so far. The click events on the month / year change buttons would be a really nice and useful feature :)

import React, { FunctionComponent, useEffect } from 'react';
import { DatePicker, Space } from 'antd';
import classNames from 'classnames';
import { DateRange } from 'models/general';
import moment, { unitOfTime, Moment } from 'moment';

import styles from './calendar.styles.less';

export type DateRange = [start: Moment, end: Moment];

const { RangePicker } = DatePicker;

const hasNextMonthClassname = (className: string) =>
    className === 'ant-picker-header-next-btn' ||
    className === 'ant-picker-next-icon';

const hasPrevMonthClassName = (className: string) =>
    className === 'ant-picker-header-prev-btn' ||
    className === 'ant-picker-prev-icon';

// year jump
const hasNextSuperClassName = (className: string) =>
    className === 'ant-picker-header-super-next-btn' ||
    className === 'ant-picker-super-next-icon';

const hasPrevSuperClassName = (className: string) =>
    className === 'ant-picker-header-super-prev-btn' ||
    className === 'ant-picker-super-prev-icon';

const getMomentOperator = (className: string): 'add' | 'subtract' => {
    if (hasNextMonthClassname(className) || hasNextSuperClassName(className)) {
        return 'add';
    } else if (
        hasPrevMonthClassName(className) ||
        hasPrevSuperClassName(className)
    ) {
        return 'subtract';
    } else {
        return null;
    }
};

const getEventTimeEntity = (className: string): unitOfTime.Base => {
    if (hasNextMonthClassname(className) || hasPrevMonthClassName(className)) {
        return 'M';
    } else if (
        hasNextSuperClassName(className) ||
        hasPrevSuperClassName(className)
    ) {
        return 'y';
    } else {
        return null;
    }
};

let displayedMonths: [Moment, Moment] = [
    moment().clone().startOf('M'),
    moment().clone().add(1, 'M').startOf('M'),
];

type DateRangePickerProps = {
    onChange?: (dateRange: DateRange) => void;
    onPanelChange?: (dateRange: DateRange) => void;
};

export const DateRangePicker: FunctionComponent<DateRangePickerProps> = ({
    onChange,
    onPanelChange,
}) => {
    const eventHandler = (e) => {
        const { target } = e;
        const element: HTMLElement = target as HTMLElement;

        let [left, right] = displayedMonths;

        const handler = getMomentOperator(element.className);
        const timeEntity = getEventTimeEntity(element.className);

        if (handler && timeEntity) {
            left = left.clone()[handler](1, timeEntity);
            right = right.clone()[handler](1, timeEntity);

            displayedMonths = [left, right];

            if (onPanelChange) {
                onPanelChange(displayedMonths);
            }
        }
    };

    useEffect(() => {
        document.addEventListener('click', eventHandler);

        return () => {
            document.removeEventListener('click', eventHandler);
        };
    }, []);

    return (
        <Space direction='vertical' size={12}>
            <RangePicker
                className={styles.crossRentCalendar}
                //  onPanelChange={panelChangeHandler}
                dropdownClassName={styles.dropDownClassName}
                separator={<div> / </div>}
                onChange={([start, end]: DateRange) => {
                    if (onChange) {
                        onChange([start, end]);
                    }
                }}
                dateRender={(current) => {
                    const weekDay = current.day();
                    return (
                        <div
                            className={classNames(styles.dateCell, {
                                [styles.isSunday]: weekDay === 6,
                            })}
                        >
                            <span>{current.date()}</span>
                        </div>
                    );
                }}
            />
        </Space>
    );
};

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[luchobertello]

I would also really need this 👍

Are there any changes on this topic so far?

I also need this feature.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.