vue-hotel-datepicker Not Working Properly in US Region when I use it with dayjs.

[arqamtahir]

Summary: I am encountering an issue with the Vue Hotel Datepicker calendar component in my Nuxt.js application. Specifically, the calendar does not function correctly in the US region. When users attempt to interact with the calendar, it behaves unexpectedly, which disrupts the user experience.

Steps to Reproduce: Go to the nice2saty.com Navigate to the calendar component within the application in any US region. here is my component called

             <HotelDatePicker
                  format="DD-MM-YYYY"
                  :alwaysVisible="false"
                  :startingDateValue="startingDate"
                  :endingDateValue="endingDate"
                  @check-in-changed="onCheckInChange"
                  @check-out-changed="onCheckOutChange"
                />

Set the defaultDate format to this

export function defaultFormat(date) {
  return dayjs(date).format('YYYY-MM-DD')
}

and there is my onCheckInChange function

onCheckInChange(checkInDate) {
      if (checkInDate !== null) {
        if (this.getQueryParams !== '' && this.getQueryParams.includes('check_in')) {
          const params = queryString.parse(this.getQueryParams, { arrayFormat: 'bracket' })
          params.check_in = this.defaultFormat(checkInDate)
          const paramString = queryString.stringify(params, { arrayFormat: 'bracket' })
          this.updateQueryParams(paramString)
        } else if (this.getQueryParams === '') {
          const params = queryString.parse(this.getQueryParams, { arrayFormat: 'bracket' })
          params.check_in = this.defaultFormat(checkInDate)
          const paramString = queryString.stringify(params, { arrayFormat: 'bracket' })
          this.updateQueryParams(paramString)
        }
        this.updateCheckIn(this.defaultFormat(checkInDate))
        Cookies.set('calendar_checkin', this.getCheckIn)
      }
      else {
        Cookies.set('calendar_checkin', null)
      }
    },

Attempt to select dates or interact with the calendar controls.

Expected Behavior: The calendar should function smoothly and allow users to select dates without any issues, regardless of the region or locale settings.

Actual Behavior: In the US region, the calendar exhibits unexpected behavior, such as my app goes hang, and user are not able to interact anything.

[remcoz]

Got the idea that this plugin is not maintained at all. Better to move to other tech

[matiasperrone]

Hi, Yes I don't have a lot of time recently to maintain it, but I'll check the issue, and you are always welcomed to send a PR with the fix.

[matiasperrone]

Can you provide the code for "this.updateCheckIn"?

What I saw is that it seems you have an infinite loop in your code. I want to be sure. The code executes for very long, after analyzing it a bit (I don't have the source code) using the DevTools I see that it is always executing and never ends, so holds the interactivity of the page with the user.

Share the code with me or maybe we can arrange a private consultation for your specific problem. https://calendly.com/matias-perrone. MP using X @matup, or go to https://www.globalinnovation.com.ar/ and check at the bottom.

[abdullah-336]

Hi @matiasperrone, we're experiencing an issue with the Vue Hotel Datepicker calendar component on our Nuxt.js site at nice2stay.com. The problem seems to stem from a timezone issue specifically affecting users in the US region. While the calendar functions correctly for European users, US users encounter unexpected behavior when interacting with it. It seems to be related to the timezone management within the "vue-hotel-datepicker" package version "^4.5.1". Even You can test that issue by changing the region from the Inspect tools.

According to the documentation on GitHub (https://github.com/joffreyBerrier/vue-hotel-datepicker), it's suggested to define the timezone of the calendar to ensure proper management of periods and disabled dates in the correct timezone. We want to address this issue without migrating to a different calendar solution, as we've been using this Vue 2-based calendar successfully over the years.

Could you please investigate this matter and provide a fix? We've been receiving numerous complaints from users in the US, and resolving this would greatly improve their experience on our site. Thank you for your assistance. If you want some more details please let me know. Thanks

[matiasperrone]

Hello @abdullah-336,

Sure, I can help you! Please contact me privately so you can share with me such code, and lets arrange a private consultation for your specific problem.

Ways of contact:

• https://calendly.com/matias-perrone.
• Private Message using X @matup
• Go to https://www.globalinnovation.com.ar/ and check at the footer, you will see an email and a phone number.

If it is a plugin issue I can fix it within the hour.

[matiasperrone]

Please @abdullah-336 @arqamtahir book a meeting with me so may address this issue.