Daterange picker: Weird jumping of calendar after the first date selection

[vadal]

Bug description: Weird jumping of calendar after the first date selection

Plunker/StackBlitz that reproduces the issue: To reproduce, open a date range picker that has the default two month calendar (for example: August and September). Select the first date from the month that is on the right side (September). Calendar of this month (September) will be moved on the left and the next month (October) will appear on the right, but with a very weird way without a transition.

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.3.0

Angular: 9.1.6

Bootstrap: 3.3.7

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

Smoothly move the selected month on the left side or no movement (retain the selected month on the right side).

Any idea?

[daniloff200]

> no movement I don't think it's a good idea. That was done, because, it's obvious, that if you select September as a first date, you definetely will not pick August, July, etc as the end month

also, I see, that you used 3.3.0 version, that's very old one. You can try to update to the latest versions (5.6.1, or, 6.0.0 ) perhaps, there it will be better

[vadal]

@daniloff200 thank you for your response. I understand the purpose of the jump.

What I want is to make the transition smoother. Is any way?

[rtpHarry]

This is really bad, im going to have to disable the extra months. It's totally confusing, even for me as the developer, its caught me out when I first noticed it a few weeks ago.

And even now, I've just gone through the process to upgrade angular, ngrx, and ngx-bootstrap to get the latest version - thinking that it had some kind of selection bug where I could not deselect the first date.

It was only after that didn't fix it, and I've now come searching for others with the bug, that I've realised it is accepting the date I click, but instead of selecting where I click it's jumping over to the left hand calendar month.

Users are not going to get this at all.

I'm going to have to disable the multiple month selection which is a real loss, or switch to a different calendar.

[rtpHarry]

Unfortunately I've run out of time for this. I did dig through the code and chat with the ai, and found a potential solution, but setting up the build, writing the tests and putting it all together is going to take another few hours which I don't have.

Step 1: Add a Configuration Option In the BsDatepickerConfig, add a new property, for example, preventMonthRefocusOnSelect.

export class BsDatepickerConfig {
  ...
  preventMonthRefocusOnSelect?: boolean = false; // default is false, maintaining current behavior
}

Step 2: Modify the Reducer to Check the Configuration Update the SELECT case in the reducer to check for the new configuration option and apply the behavior based on it.

case BsDatepickerActions.SELECT: {
  if (!state.view) {
    return state;
  }

  const newState = {
    selectedDate: action.payload,
    view: state.view
  };

  const mode = state.view.mode;
  const _date = action.payload || state.view.date;

  // Check if the selected date is already visible in the displayed months
  const isDateVisible = state.monthsModel?.some(month =>
    isSame(month.month, _date, 'month')
  );

  // Add condition to apply the setting from the config
  if (!state.preventMonthRefocusOnSelect || !isDateVisible) {
    const date = getViewDate(_date, state.minDate, state.maxDate);
    newState.view = { mode, date };
  }

  return Object.assign({}, state, newState);
}

Step 3: Ensure Configuration Is Passed to the Component In the component or service where the datepicker is initialized, ensure the configuration option preventMonthRefocusOnSelect can be set based on user preferences.

For example, in the component using BsDatepickerConfig:

const bsConfig: Partial<BsDatepickerConfig> = {
  preventMonthRefocusOnSelect: true // Enable this behavior
};

For now I'm just going to set the displayed months to 1 and hope somebody else can pick this up.