Disable Calendar Antd from automatically updating the date when the month or year is changed

Question

I'm using Calendar andt and facing the problem, when I'm in the current month, if I choose to change the month, Calendar automatically updates the date of the old month to the date of the new month.

Example: I am in 2022-07-20 then I select August then Calendar will update itself to 2022-08-20

This also fires onChange and onSelect events, I just want the onChange and onSelect events to be fired when the user clicks on the date in the calendar, how can I prevent it from updating itself?

Code here :

const customHeaderCalendar = ({ value, type, onChange, onTypeChange }) => {
        let yearNow = parseInt(moment().format('YYYY'));
        const year = value.year();
        const month = value.month();
        const options = [];

        for (let i = year - 10; i < year + 10; i += 1) {
            if (i >= yearNow){
                options.push(
                    <Select.Option key={i} value={i} className="year-item">
                        {i}
                    </Select.Option>,
                );
            }
        }

        const start = year == yearNow ? parseInt(moment().format('M')) - 1 :  0;
        const end = 12;
        const monthOptions = [];
        const current = value.clone();
        const localeData = value.localeData();
        const months = [];

        for (let i = 0; i < 12; i++) {
            current.month(i);
            months.push(localeData.monthsShort(current));
        }

        for (let i = start; i < end; i++) {
            monthOptions.push(
                <Select.Option key={i} value={i} className="month-item">
                    {months[i]}
                </Select.Option>,
            );
        }



        return (
            <div
                style={{
                    padding: 8,
                    display: 'flex',
                    justifyContent: 'space-between'
                }}
            >
                <span style={{fontSize: '16px'}}>Select date</span>
                <Row gutter={8}>
                    <Col>
                        <Select
                            size={'small'}
                            dropdownMatchSelectWidth={false}
                            className="my-year-select"
                            value={year}
                            onChange={(newYear) => {
                                const now = value.clone().year(newYear);
                                onChange(now);
                            }}
                        >
                            {options}
                        </Select>
                    </Col>
                    <Col>
                        <Select
                            size="small"
                            dropdownMatchSelectWidth={false}
                            value={month}
                            onChange={(newMonth) => {
                                const now = value.clone().month(newMonth);
                                onChange(now);
                            }}
                        >
                            {monthOptions}
                        </Select>
                    </Col>
                </Row>
            </div>
        );
    }

 <Calendar 
headerRender={customHeaderCalendar} 
defaultValue={valueDefaultDatePicker} 
disabledDate={disabledDate}
onSelect={onChangeDepartureDay} 
fullscreen={false} 
onChange={() => console.log('onchange')}
                                             />

Thanks

Answer 1

I think you sound make a condition to avoid this in onSelected. It keeps choosing unexpected date in UI, but you can do the logic with the right selected date.

onSelect={(date: moment.Moment) => {
  if(
   date.isSameOrAfter(startDate, "day") &&
   date.isSameOrBefore(endDate, "day")
  )
    //do something
}}