Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed calendar switch a month with the latest enabled dates #187

Closed
wants to merge 0 commits into from

Conversation

imblowfish
Copy link
Collaborator

Closes #157

New test has been added #186

I tried to fully fix the problem with auto-switching to the latest selected dates, but I cannot achieve this due to this behavior in the ion-datetime https://ionicframework.com/docs/api/datetime#setting-values-asynchronously:

If its value is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the value in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's value is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating.

As you can read, datetime automatically jump to the selected date, so I decided to fix at least the most annoying problem

Let's imagine that we selected the following dates in the Edit mode:
image
image

Let's click on Save and we should see something like that:
image
But when we click on Edit again our date will be automatically switched at the begin of the latest active dates
image

I was able to fix that by tricking ion-datetime. For this I called Array's reverse function on the lastPeriodDays array and pass it as value prop to the ion datetime. In this case ion-datetime jumps to the month in which we have the last day of range, believing that this is the beginning of the range, but in fact this is the end of the range

With this fix, the situation described above will looks like this:
image
Click on Edit:
image

On the other side, this hack still not fix the following behavior and I don't think that we can do that without ion datetime's code modifications
Selected dates:
image
Click on Save:
image
Click on Edit again:
image

But, in my opinion, this behavior is more obvious and logical, because in any case the ion datetime is jump to the last month, where the last selected day is located

@imblowfish imblowfish added this to the v2.3.6 milestone Nov 22, 2023
@imblowfish imblowfish self-assigned this Nov 22, 2023
@imblowfish
Copy link
Collaborator Author

imblowfish commented Nov 22, 2023

@IraSoro I don't have rights to modify https://github.com/users/IraSoro/projects/7/views/1 project
Could you please give me the rights or add this test to the project by yourself? #186

@imblowfish
Copy link
Collaborator Author

imblowfish commented Dec 3, 2023

When I worker on #153 I cherry-picked changes from this commit. And, #153 was merged earlier than this commit. So. looks like we can close this PR and issue as already fixed with #153

@imblowfish imblowfish closed this Dec 3, 2023
@imblowfish imblowfish reopened this Dec 3, 2023
@imblowfish imblowfish closed this Dec 3, 2023
@imblowfish imblowfish force-pushed the 157-fix-calendar-switch-on-enabled-dates branch from 77083d7 to 55159b7 Compare December 3, 2023 00:52
@imblowfish imblowfish deleted the 157-fix-calendar-switch-on-enabled-dates branch December 3, 2023 00:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

The calendar automatically switches to the month where more dates enabled
1 participant