bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
53 stars 6 forks source link

`DateField` don't respect month change when use top menu in a picker #10009

Open chuckn0rris opened 2 weeks ago

chuckn0rris commented 2 weeks ago

https://github.com/user-attachments/assets/b4d98f6c-86a1-4dd0-bb2e-30d1d94e9fe6

Forum post

ExtAnimal commented 2 weeks ago

DatePicker.goto needs to be split into two phases:

    goto(direction, unit) {
        const
            me                  = this,
            { activeDate }      = me,
            activeCell          = activeDate && me.getCell(activeDate);

        let newDate;

        // If active date is already in the month we're going to, use it
        if (unit === 'month' && activeCell && activeDate?.getMonth() === me.month.month + direction) {
            newDate = activeDate;
        }
        // Move the date by the requested unit
        else {
            newDate = DateHelper.add(activeCell ? activeDate : me.date, direction, unit);
        }
        me.gotoDate(newDate, activeCell);
    }

    gotoDate(newDate, activeCell = this.activeDate && this.getCell(this.activeDate)) {
        const
            me                  = this,
            firstDateOfNewMonth = new Date(newDate);

        firstDateOfNewMonth.setDate(1);

        const lastDateOfNewMonth  = DateHelper.add(DateHelper.add(firstDateOfNewMonth, 1, 'month'), -1, 'day');

        // Don't navigate if month is outside bounds
        if ((me.minDate && direction < 0 && lastDateOfNewMonth < me.minDate) || (me.maxDate && direction > 0 && firstDateOfNewMonth > me.maxDate)) {
            return;
        }

        // We need to force a UI change even if the UI contains the target date.
        // updateDate always calls super and CalendarPanel will refresh
        me.isNavigating = true;

        const result = me.date = newDate;

        if (activeCell) {
            me.activeDate = newDate;
        }
        me.isNavigating = false;
        return result;
    }

Then onMonthPicked should use that new method:

    onMonthPicked({ record, userAction }) {
        if (userAction) {
            this.gotoDate(DateHelper.add(this.activeDate, record.value - this.activeDate.getMonth(), 'month'));
        }
    }