zestfulnation / vue-hotel-datepicker Goto Github PK

When picked some data and outfocus from element and press backspace(delete) button, the picked data are reset. Can you fix this issue?
I find this code in hotel-datepicker.js:

// If the user presses delete or backspace, clear the selection
        document.addEventListener('keydown', KeyCheck);

        function KeyCheck(event) {
            var KeyID = event.keyCode;
            if (KeyID === 8 || KeyID === 46) {
                self.clearSelection();
            }
        }

Can you remove it? It a really the big problem, because if you have other fields to input some data and make mistake, then press delete and ooops! you lost you piked data.

Excuse me,

I read this document, But I can not find how to get the value of the method..

Please tell me what should I do,Thanks.

I'm having trouble getting this to work with Nuxtjs generated sites...
the error that I'm getting is "document is not defined" due to server side rendering. I've tried everything that nuxt community suggests to get the code to pull only on the client side, but I have no luck...

i.e.
nuxt.config.js

modules.exports = {
	plugins: [
		{
			src: 'vue-hotel-datepicker',
			ssr: false
		}
	]
}

or in a vue component:

if (process.browser) {
	require('vue-hotel-datepicker')
}

export default {
	
}

I have used vue-hotel-date-picker its working fine. the issue is when using disabled dates props its disabled the dates first time when initializing and update on calendar.but when i update disabled dates array on any button click event it updates the disabled dates array but not reflect or render in view component. I have debug it through vuejs chrome extension.Here is an attached image link http://imgur.com/a/Lkerb

<template>
  <div id="app" style="text-align: left; padding: 10vw">
    <div>
      <div class="box">
        <h3>Check in only on saturday and minimum stay of 10 days</h3>
        <DatePicker
          DatePickerID="01"
          :disabledDates = "disabledDates"
          :enableCheckout="true"
          :minNights="10"
          :useDummyInputs="false"
		   placeholder="StartDate ► EndDate"
          />
      </div>
      <button @click="onChangeDisableDates()" > Change Disable Dates </button>
  </div>
  </div>
</template>

<script>
import DatePicker from 'components/HotelDatePicker.vue';

export default {
    components: {
        DatePicker
    },

    data () {
      return {
         disabledDates : ['2017-08-18']
      }
    },
    methods : {
      onChangeDisableDates () {
         this.disabledDates.push("2017-08-19");
      }
    }
};

</script>

@krystalcampioni

Description

Before startDate is disable, I cannot select it, how can I select date that i want？

Description

I am calling an api in beforeMount hook, that returns some initial dates from localStorage, and when I get
the dates, I pass them down to the HotelDatePicker as startingDateValue and endingDateValue, in order to render them.
It seems that HotelDatePicker gets these dates, but it does render them, does not update for some reason. chekin and checkout are null in component's data.

I tried also to watch values in component and manually call this.$emit("check-out-changed", newDateValue), but it doesn't seem to help.

Also, I tried to use v-if for destroying and mounting again the component, but this is causing issues for SSR, and does not seem like a nice solution.

P.S.
By the way, I am using vuex for storing the dates, if this matters.

Code sample

Steps to Reproduce

1. Call an api to get initial dates
2. After getting response, pass them down to HotelDatePicker as startingDateValue and endingDateValue props

Expected behavior:
I expect HotelDatePicker to render the newly passed dates

Actual behavior:
HotelDatePicker gets dates as props but doesn't render the dates

Datepicker Version

2.2.0

The exact issue can be found at your demo: https://krystalcampioni.github.io/vue-hotel-datepicker#minNights

There seems to be a bug that prevents me from reselecting dates that are within the minNight restriction. For example: I will choose two arbitrary dates as the checkIn and checkOut: 11-1-2017 as checkIn and 11-30-2017 as checkOut. When I want to reselect my checkIn and checkOut nights, I cannot choose any nights that are between 11-1-2017 and 11-5-2017, because they are disabled by minNights.

<HotelDatePicker
 :minNights="5">
</HotelDatePicker>

My expected behavior is that if I wanted to make changes to my checkIn and checkOut dates after I had already selected them both, there shouldn't be any restrictions. In my code I am trying the following:

updateMinDate() {
    if (!!this.$refs.hotelDatePicker.checkIn && !this.$refs.hotelDatePicker.checkOut) {
        this.applyMinDate = 7;
    } else {
        this.applyMinDate = 0;
    }
}

applyMinDate is a key in my component's data object, and updateMinDate() is a method invoked by the "checkInChanged" and "checkOutChanged" events that are emitted from the hotelDatePicker component.

What I want to accomplish is to only apply the minDate limitation on disabled dates when ONLY the checkIn date is selected. If both dates are selected and I wish to make changes to my checkIn and checkOut dates, there should not be a minNight restriction, NOT until I select a checkIn night and am currently selecting my checkOut night.

So far it seems to be working for me after adding that if else block, however its just a temporary fix.

Description

Missing i18n when using Fecha library to format dates (see image attached).
Could

I please submit a PR? I have a fix for this.

[Description of the bug or feature]
Date formats within the inputs (checkin and checkout) are not using i18n.

Code sample

[ If you are submitting a bug issue, paste your code so I can reproduce it, or a link to a Codepen with it ]

Steps to Reproduce

1. Set the date format to MMMM D
2. The month is not translated.

Expected behavior: [What you expected to happen]
Date formats within the inputs (checkin and checkout) should use i18n.

Actual behavior: [What actually happened]
Date formats within the inputs (checkin and checkout) aren't using i18n, and therefore, are not being translated.

Datepicker Version

[ The version of the datepicker you have installed in your project ]

Description

ex: If tomorrow is booked by someone else, I can't select checkin date on today and checkout on tomorrow. In fact, tomorrow should be enabled if I selected checkin today.

Code sample

Steps to Reproduce

1. Disable 2018-04-25
2. Select checkin 2018-04-24
3. 2018-04-25 should be enabled for checkout.

Datepicker Version

The date picker breaks when trying to select a check-in date, then going to the next month and trying to select a new date, all days become disabled. Same for when you return back to the month

Select a date:

Click on the arrow for the next month:

Go back a month:

I want to highlight the current date when the user click on "CheckIn". I think that it's important give the user a reference in the select preview.

Thanks in advance!

I have my startDate set to the beginning of the year. I am unable to hit the back button in the calendar popup so and am locked on current month.

I want to open/close this from parent component.

I have tried this but it doesn't work

<button @click="$refs.datepicker.isOpen = true">
<HotelDatePicker ref="datepicker"></HotelDatePicker>

Is there anyway to do it?

Unless I'm missing some configuration of the props, I don't see any way to enable users to check-in and check-out on the same day (I know it's a slightly odd edge case but we of course need this feature).

Any plan to support this?

Would like an option to change to Monday as the first day of week.

Would like option to show the number of the week to the left in the calendar. Very common that you relate to the week number in parts of Europe.

Description

I am trying to use this component, but I am getting this error:

[Vue warn]: Unknown custom element: <hoteldatepicker> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

But of course I imported it and added it already to my vue instance.

Code sample

After installing it via npm I added it to the header of my javascript file:

import Multiselect from 'vue-multiselect';
import HotelDatePicker from 'vue-hotel-datepicker';
...

const app = new Vue({
    el: '#app',

    components: {
        Multiselect,
        HotelDatePicker
    },
    data: {...}
}

Then added this tag:

<HotelDatePicker></HotelDatePicker>

But it didn't work, it keeps showing me the error above!

Expected behavior: To see the component

Actual behavior: Getting error about the registering the component

Datepicker Version

^2.0.11

Once component is mounted i cannot dinamically change startDate ( for example calling an api which returns hotel opening date )

Description

I would like to clear fields by clicking a button. How to do this ?

Code sample

Datepicker Version

vue-hotel-datepicker: 2.2.1

Description

Using "px" instead of "em" will fix the months and days overlapping in the 852 x 621 resolution when setting the "body" font-size to 18px. I understand the usage of "em", but I think we would be safer just using px for the media queries.

Please see the bug below:

@krystalcampioni, may I proceed and submit a PR for this?

Code sample

[ If you are submitting a bug issue, paste your code so I can reproduce it, or a link to a Codepen with it ]

Steps to Reproduce

1. Set the body font-size to 18px
2. Open date picker in this resolution: 852 x 621
3. The month and day labels are overlapping

Expected behavior: [What you expected to happen]
The month and day labels shouldn't be overlapping.

Actual behavior: [What actually happened]
The month and day labels are overlapping.

Datepicker Version

2.2.4
[ The version of the datepicker you have installed in your project ]

Description

On iPhone X, iOS 11.2, Safari, if I open the demo page, the following problems occur:

• When I click on any example (can be the first one), I see the calendar fullscreen; when I try to scroll upwards to see the next months (only january and february are within the viewport), I see the back of the page scolling instead, and only after trying 5 or 10 times I can manage to scroll (just a little) of the calendar that is fullscreen on the foreground;

• As soon as I click on any example, I see a very large blue cursor blinking inside the calendar, exactly where the was. Any ideas how to remove this? It's very bothersome and kind of ruins the UI, has a very weird feel to it.

• Also, even tough I can't reproduce enough, 30% of my clicks in the calendar end up selecting the wrong date, don't know exactly why.

Code sample

Not needed, it's in the default examples.

Datepicker Version

None, it's in the examples.

Full lodash library (~70kb minified) imported for just one _.filter() function.
I suggest using lodash-es and import filter directly

Description

I am unable to access the check-in and check-out dates and I am getting these warnings when I do select a check-in and check-out dates:

vendor.js:33623 [Vue tip]: Event "checkinchanged" is emitted in component <HotelDatePicker> at src/components/DatePicker.vue but the handler is registered for "checkInChanged". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "check-in-changed" instead of "checkInChanged".
vendor.js:33623 [Vue tip]: Event "checkoutchanged" is emitted in component <HotelDatePicker> at src/components/DatePicker.vue but the handler is registered for "checkOutChanged". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "check-out-changed" instead of "checkOutChanged".

Code sample

As I mentioned in the bug #45 I only could get this working by renaming the import:

components: {
        Multiselect,
        Calendar: HotelDatePicker
    },
...
<Calendar
                                        :hovering-tooltip="false"
                                        @checkInChanged="setCheckIn"
                                        @checkOutChanged="setCheckOut"
                                ></Calendar>

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: [What you expected to happen]

That my event handlers are being fired with the selected dates.

Actual behavior: [What actually happened]

Getting warnings.

Datepicker Version

Latest version: ^2.0.11

*, :after, :before{ -webkit-box-sizing:border-box; box-sizing: border-box }
this code will affect global style @krystalcampioni

Description

How I can change date to all component when is modified in one component?

Hi,

I would like to use very much you plugin, because I think it is very nice.

My use case is for tournaments, and it can happen that the event is 1 or more day.

Is it possible to select the same date for the check-in and the check-out??

It would be usefull to make prop setting that would allow to choose first day of week.
In some countries first day of week is usually monday, not sunday.

Description

Instead of blocking the dates before the selected start date, could we please allow user to simply change the start date when selecting a date before the current start date? I think it would be a bit more user friendly, since if user gets the start date wrong, the user has to select an end date first before changing the start date. I would like to help you on doing this, do you think this is something that could be done? If yes, could you please point me out in the right direction on how to do this? Which vue files contain the logic that I would have to work on?

[Description of the bug or feature]

Code sample

[ If you are submitting a bug issue, paste your code so I can reproduce it, or a link to a Codepen with it ]

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: [What you expected to happen]
When a start date is already selected, we shouldn't block the previous dates. If user selects a date previous the current start date, then the start date would be simply changed to that new date the user has selected.

Actual behavior: [What actually happened]
When selecting a start date, all previous dates are blocked, and the user needs to set an end date before changing the start date.

Datepicker Version

2.2.1
[ The version of the datepicker you have installed in your project ]

Description

You cannot pick starting and ending current dates as a checkin date

Code sample

Steps to Reproduce

Datepicker Version

2.2.4

Does this support moment timezone? so It doesn't rely on computers time.

Description

When the calendar is open then we can see all elements underneath which has z-index > 2

Steps to Reproduce

just add input element with z-index: 10 below calendar.
https://www.dropbox.com/s/u93lcusqy8lddj3/Screenshot%202017-11-30%2019.13.42.png?dl=0

Expected behavior:

.datepicker {
    ...
    z-index: 999;
}

Actual behavior:

.datepicker {
    ...
    z-index: 2;
}

Datepicker Version

2.0.11

Hi need help!
On desktop, How to handle (open-to-top/open-to-bottom) depending on the input position ?
If the input is in the bottom of the screen. the datepicker should open to top.

I am using the Hotel Datepicker component inside of a form element along with other inputs. Example:

<form>
    <input type="text" name="name">
    <hotel-date-picker></hotel-date-picker>
    <input type="email" name="email>
    <input type="submit" value="Send it">
</form>

Upon clicking on the clear button (button.datepicker__clear-button), it submits my entire form and causes a page refresh. I've tried the following but was unsuccessful.

const clearButton = querySelector('button.datepicker__clear-button');
clearButton.addEventListener('click', function(e) {
     e.preventDefault()
})

It only works when I inspect the element from my chrome devtools and added type="button" to the element.

<button class="datepicker__clear-button" type="button">＋</button>

Any other solutions to this issue besides the one I've mentioned?

Description

When using disabledDates in combination with minNights selecting a date right before a disabled date gets you stuck as minNights would force checkout on/after a disabled date.

Clicking the clear button fixes this but usability-wise it would be nice to get some feedback as to what's going wrong. Maybe indicate the minimum amount of nights grayed out on the disabled dates?

Another solution would be to allow the user to click on the check in date to unselect it and be able to select a new one. (That was my first reflex when getting stuck with the dates).

Code sample

                <hotel-date-picker
                    :min-nights="5"
                    :disabled-dates="['2017-11-20']"
                ></hotel-date-picker>

Steps to Reproduce

1. Pick check in on 2017-11-19
2. Try to select a check-out date or reselect the check-in date

Expected behavior: Be able to select another check-in date

Datepicker Version

2.0.11

Thanks for the package btw! It was a great relief to find this package after looking through jQuery daterangepickers and hacky solutions for hours. Great work :D

The months are not being localised.

See graphics below. Wrapping works fine on the right-side, but on the left, longer tooltips get clipped.

Clipped left-side tooltip:

Correctly wrapped right-side tooltip:

Also, with the tooltip, it might be cool to allow HTML to be passed as tooltip using Vue's v-html directive. I could wrap my tooltip text in several <div> to ensure default block wrapping but I see the tooltip just expects text to be returned from the callback function.

👍 On the great Vue component!

Can we use this without the need for an end date? So we can just pick single dates?

Many thanks

Hi, just a quick question about some option. I couldn't find any info in docs or issues.
Is there any option to change default placeholder (check-in, check-out) for specific date?

Datepicker Version

2.2.0

Hello Krystal,

I hope we can set a default value for the dates. The example on this repo isn't working,
<HotelDatePicker :value="'2020-07-14 ► 2020-07-20'"/>

I hope you can add something like this
<HotelDatePicker :startingDateValue="'2020-07-14'" :endingDateValue="'2020-07-20'"/>

Cheers

Clicking around on the calendars, I can get the end date to be earlier than the start date. Is there validation to prevent this?

Description

It would be good to have a showCloseButton prop. Also, the close button should only show up after date(s) are selected instead of by default.

Code sample

[ If you are submitting a bug issue, paste your code so I can reproduce it, or a link to a Codepen with it ]

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Datepicker Version

2.2.0
[ The version of the datepicker you have installed in your project ]

Probably obvious to anyone with more experience than me, but can you include in the examples how to bind to a model or how to get the selected date range in order to perform an API call?

Hi, just started working with your hotel-datepicker (and Vue for that matter). Love the looks and the options already in it.

Was wondering if you have plans for a function like enableCheckin, similar as enableCheckout but for start date. I can manipulate the disabled dates to do this, but it's nicer to do it in the picker itself.
Using enableCheckin and enableCheckout together will give an issue for 1 night disabled dates since a consecutive range will not be possible, and there is currently no way to show this.
This might be due to the fact that the user thinks in days, but the hotel business works with nights.

Another possible feature could be: tentativeDates. Quite often you have unconfirmed bookings, and instead of showing these dates as unavailable, these can be shown in a different color and/or warning, but make it possible to still select them.

Still working to master Vue, otherwise I'd try this with a PR..

I want to change the color of the class .datepicker__dummy-input--is-active but i can't.

My vue component:

<template>
  <no-ssr>
    <HotelDatePicker class="color-active" :i18n="dateoptions.i18n" :format="dateoptions.format" DatePickerID="travel" @checkOutChanged="updateDateTo($event)" @checkInChanged="updateDateFrom($event)"/>
  </no-ssr>
</template>

My style:

.datepicker-label{
  font-weight: normal;
  color: #4182e0;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
}
.color-active .datepicker__dummy-input--is-active{
  color: #4182e0;
}

When I change a color at class datepicker-label is working perfectly, but when is input:active not working. The strange is when I inspect the elements the modification appears, but the screen continues the default color(#00ca9d).

Datepicker Version

^2.0.11

How can i specify "monday" as the first day of the week ?

Regards

I need an picker for web?

Unfortunately, I haven't had much free time to maintain this project 😢
If you find this package useful and would like to help maintain it or collaborate, let me know in this issue 🖖🏽

Hi,

I'm a bit new to Front end dev. I tried to use you plugin in my project, but it doesn't render, and in debugger, vue is not detecting it.

I installed it with npm with no problem.

Then, in my boostrap.js ( this is where I declare all global components ) , I do :

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
    components: {
        HotelDatePicker,
    },
}

and then in my HTML, I insert

                    <DatePicker DatePickerID="01"/>

I also ran npm run dev to run webpack, but it is not rendering...

In the source, I can see that webpack does include the vanilla js code corresponding to the inclusion of library:

import HotelDatePicker from 'vue-hotel-datepicker'

export default {
    components: {
        HotelDatePicker,
    },
}

Help!!! What am I doing wrong?

Hi,

Perhaps an edge case, but I have the following datepicker:
<date-picker DatePickerID="calendar" :format="'DD-MM-YYYY'" :disabledDaysOfWeek="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Sunday']" :disabledDates="['2017-11-11', '2017-11-12', '2017-11-13', '2017-11-14', '2017-11-15', '2017-11-16', '2017-11-17', '2017-11-18', ]" :enableCheckout="true" :allowedRanges="[7,14,21]" :minNights="7" :showCloseButton="true" ></date-picker>
In this case only Saturday is selectable as Check-in and a range of 7, 14, 21 days (eg. Check-out on Saturday again).
Here a week is blocked (disabledDates). But after selecting 4-11 as Check-in (one week before the disabledDates), the datepicker allows to select 18-11 as check-out, while this includes disabled dates.

Hope you're able to take a look at it!

Description

[Description of the bug or feature]

Code sample

[ If you are submitting a bug issue, paste your code so I can reproduce it, or a link to a Codepen with it ]

Steps to Reproduce

1. [First Step]
2. [Second Step]
3. [and so on...]

Expected behavior: [What you expected to happen]

Actual behavior: [What actually happened]

Datepicker Version

[ The version of the datepicker you have installed in your project ]