northwalker / vue-hotel-datepicker

A Vue.js date range picker component without other dependencies for hotels and multi-purpose.

Hi there 👋

轟隆隆隆🤣🤣隆隆隆隆衝衝衝衝😏😏😏拉風😎😎😎引擎發動🔑🔑🔑引擎發動+🚗+👉+🚗 風 💨💨 吹動每一個毛孔👩🦲🧔 我是今夜🌙🌙 最😎 稀有的品種🤓🤓 讓😯 看到的人以為是夢😱😱 還沒醒來😴😴 就已經無影無蹤👻👻 風 💨💨 敲醒每一個面孔😲😲 我是明天🤙🤙 被 贊嘆的驚悚😵😵 讓😨😨 看到的人全部感動😭😭 0⃣到💯K only 4⃣秒鐘😏😏 紅燈停 綠燈行🚥🚥 看到行人要當心🚶♀🚶♀ 快車道 慢車道😈😈 平安回家才是王道 💪💪 開車🚗🚗不是騎車🏍🏍不怕沒戴安全帽👲👲只怕警察👮♂👮♂BI BI BI 叫我路邊靠 😩😩 BI BI BI BI BI 大燈忘了開😏😏 BI BI BI BI BI 駕照沒有帶 🤫🤫 BI BI BI BI BI 偷偷講電話😎😎 BI BI BI BI BI 沒繫安全帶 😬😬 我的夢幻車子🚗🚗就是最辣🌶🌶的美女👸👸 有她陪伴😏😏哪怕車上只有收音機 📻📻 我就像隻野狼🐺🐺身上披著羊🐑🐑的皮 我的心情🤪🤪好比開著一架戰鬥機🛩🛩

vue-hotel-datepicker's Issues

previous arrow not visible if minDate from previous month but startDate not specified

Hi! Thank you so much for this component! 😄 I was trying this component out, and I found that if we specify a previous month minDate and some future maxDate as props, the previous month arrow is not visible to navigate to a previous date. However, if we specify minDate, maxDate, startDate as well as endDate making sure that the startDate lies in a previous month, then only the previous month arrow is visible. It will create an issue for users to select a previous month start date in cases where there is no default date range initialized.

So I checked the code and it seems, there is a function called disabledPreviousArrow that decides whether 'disabled' class is to be added for the previous-arrow. The decision there takes place based on startDate, but I guess it should also depend on minDate. In cases where startDate is not specified but a minDate from a previous month is specified, 'disabled' class should not be added.

Dynamic minNight

Hi,

Is there an event triggered on months change?
I would need to set MinNight only for selected months?

Any idea on how I could get this done please?

Best regards

add @open event

priority

Can you add @OPEN event, so that on opening datepicker popup I can add my script.

Usage

My usage is to add input field for inputing time & date.
On opening popup, I have added script to append those input fields in .vhd-calendar-left & .vhd-calendar-right

Issue when closing calendar on mobile

Hello,

Using Desktop, it's OK, when I select arrival date, and close the calendar to reopen it nothing changes.

But using mobile, when I close calendar, the dates somehow resets and I can select dates that I should not be able to select.

To illustrate this:

First calendar opening is OK

If I select March 26th I can't select departure as 26th can't be an arrival day (by the way, half days do not have specific css class to show if it's just an arrival open date or departure open date).

If I close the calendar to reopen it arrival date is still selected but all other dates reappear which allows the user tu select March 28th for departure which leads to double / overlapping bookings.

This is only happening on mobile layout.
Any idea on how to solve this?
Is an event triggered on close only on mobile?

can i replace default css

i have problem with default css min-width 300px, can i rewrite css rule?

Maximum night exceed because user can select dates before start date

Hi,
As screenshot attached, user can select date before start date so it exceed maximum nights

Inline show datepicker

is vue-hotel-datepicker support show inline? without input text element?

Thanks.

Max night issue

<VueHotelDatepicker :ref="datepickerId" :datepickerd="datepickerId" :selectForward="selectForward" :maxNights="maxNights" v-on:update="getDate($event)"
format="MM-DD-YYYY" :placeholder="placeholder"

is there anything wrong?

peerDependencies for vue?

Hi,

Thank you for maintaining this great component. There are not a lot to choose from for this use case.

Reviewing the v2.0.0 I noticed you declared vue in the dependencies section of packages.json. Shouldn't it be declared in the peerDependencies section?

Conflicting package name of vue-hotel-datepicker

Hey,

there is another package with the very same name as yours:

https://github.com/krystalcampioni/vue-hotel-datepicker

This gives my current project (and version selection) a headache. ;)

Would you consider changing the name?

Possibility to choose the starting day of the week

Right now the starting day is Sunday.
Is it possible to change this to Monday?

User is able to select a date range with a disabled date in it

Hello,
I just noticed that users are able to select a date range with a disabled date in it.
This should not be possible.. ?

Any idea on how I could fix this please ?

Localization support

Hi,

Could we have some doc on localization support please?
I can't manage to translate my datepicker.

Got error using typescript

Hello and thanks for the amazing component.

When i try to import it in a Vue Typescript project, I encounter this error.

37:32 Could not find a declaration file for module '@northwalker/vue-hotel-datepicker'. '/your/project/root/node_modules/@northwalker/vue-hotel-datepicker/lib/vue-hotel-datepicker.umd.js' implicitly has an 'any' type.
  Try `npm install @types/northwalker__vue-hotel-datepicker` if it exists or add a new declaration (.d.ts) file containing `declare module '@northwalker/vue-hotel-datepicker';

Can you please fix this?

Thanks again ❤️

onfocus event not supported

From an UI point of view it would be awesome to support tab enter like events

IMHO a very simple solution is to treat the @focus event as a click.

Do you have any solution to do that from a prop point of view?

Can I use it in a static HTML file (without Vue CLI or webpack) ?

I want to use this plugin into my static HTML website. but I can't do it. How can it will be done.

the event emitted is "comform" in your code

Found some issues

Hello there!

First of all, nice component!
I've found 2 issues related to the documentation vs. real implementation:

Prop 'separator' have a typo. The documentation states it is 'separator' but it is implementated as 'seperator'.
The documentation states this two properties 'maxNights' and 'minNights' ending with the letter 's'. It seems it's implementated without the 's' as 'maxNight' and 'minNight'.

I also found another little bug. If you set your min date to the first day of 2019, for example, the control disable the 'previous arrow' for every start of year.

Best regards!