Selecting a new End Date actually resets the Start Date with that Calendar value

[blue928]

Problem: Selecting a new End Date, especially after an error is thrown, resets the Start Date instead. In other words, it forces the user to have to restart the entire booking process, which isn't at all obvious and is a very confusing user experience. Please see the video for a visual.

https://youtu.be/4wm4ZfTNqKA

The settings are set so that this room has a max reservation of 7 days. A person chooses a start date field, the calendar pops up and selecting a day inputs the start date field. Then, focusing on an end date field, choosing a date fills out the end date. This all feels very natural and flows well. Choosing a date longer than 7 days out produces an error, as expected.

Ok, so, the natural tendency is to select the end date field again so as to put in a new end date.

Issue 1) When selecting the end date field(s) again, the calendar does not pop back up automatically as it did when first selecting dates (feels broken.) So, you have to click the "choose dates" link (again, quirky when field focus initially was responsible for opening the calendar automatically)

Issue 2) (And this is the part I believe is the actual bug) Having clicked the link to open the calendar, and then focusing on the End date, clicking on a date on the calendar actually resets the start date. If the field focus is on the end date, shouldn't the end date field be the one that's filled out and the start date left alone?

What I expected to happen / Suggested solution: -- Start Date and End Date each consist of 3 fields (M/D/YYYY). Each should be a part of their own field group so that when a user clicks in any of the corresponding fields, the calendar should pop back up automatically

-- When any of the three Start Date fields is chosen, the calendar should pop up and the description should say "Please choose a start date" (Currently, this does not say anything when the start date is first chosen). Then, selecting a calendar day correctly populates the Start Date fields.

-- When any of the three End Date fields is chosen, the calendar should pop up and the description should say "Please choose an End Date." Then, selecting a calendar day correctly populates the End Date fields.

-- There has been a lot of discussion about having two calendars to eliminate the currently confusing user experience. I agree that having separate pop up calendars would be very intuitive, and that is one solution. I have another solution that may be just as effective. On field focus in any of the Start Date fields or any of the End Date fields could not only change the description to "Please choose a start date; Please choose an end date" But also the colors of the days in the calendar could change. This would make it very obvious that you're working in one field group or another and possibly avoid having to code a separate calendar functionality.

A link to the actual demo page for further reference: http://dev.bluepresley.com/hotel/index.php/product/1-bedroom/

[anant1811]

Checked this again:

1) Issue 1) When selecting the end date field(s) again, the calendar does not pop back up automatically as it did when first selecting dates (feels broken.) So, you have to click the "choose dates" link (again, quirky when field focus initially was responsible for opening the calendar automatically)

I believe the choose date link is no longer implemented, but it's right the calendar doesn't show when you need to re-select the end date. It only shows when you click on the start date fields.

2 (And this is the part I believe is the actual bug) Having clicked the link to open the calendar, and then focusing on the End date, clicking on a date on the calendar actually resets the start date. If the field focus is on the end date, shouldn't the end date field be the one that's filled out and the start date left alone?

Since the calendar only shows on the start date fields now (choose date link is gone), it makes sense that the first selected date would be set as the start date, and the next one would be set as the end date. However, it would be an improvement if the calendar showed up when clicking on the end date fields.

Full Size: https://d.pr/i/4hkz75

[tommyshellberg]

Closing this issue because it's actually a core Bookings issue since Accommodation Bookings relies on the Bookings date picker. You could trigger the calendar to open again when clicking on one of the end/checkout date fields(day, month, year), however, the bigger problem IMO is the inability to only change the end date when necessary, for instance, when the duration is invalid(too short or too long).

That problem is a bigger undertaking which already has bug reports for Bookings and will require some UX research and design input.

In /woocommerce-bookings/assets/js/date-picker.js after line 19 you could add this to trigger the calendar to open when clicking on the end/checkout date fields:

$( 'body' ).on( 'click', '.booking_to_date_year, .booking_to_date_month, .booking_to_date_day', this.open_calendar );

But that would get overwritten anytime you updated Bookings.