benitolopez/hotel-datepicker

Date range picker for hotels

hotel-datepicker's Issues

Doesn't work with keyboard navigation [accessibility,a11y]

Part of the problem is that a lot of the event triggers are things other than buttons.

Expected:

• Should be able to open the datepicker using only the keyboard (maybe when the text input is focused?)
• Should be able to change the date using only the keyboard. This can maybe be fixed by adding buttons in each date cell and replacing the month arrow spans with buttons, and moving the event handlers to those button elements.

Month button should be disabled if min/max date is reached

The buttons get a disabled class if both months are following each other. But they should also get this class if the min and max date is reached. The buttons won't do anything, so they also could get hide.

Left or Right

Hello,

Thank you for this, it's great really!

I have a question, can it be based on the right or left side according to the shape of the page?

Have a nice day.

Need method chosen checkin, checkout

Hello, how to chosse of 2 type input (checkin, checkout) function

http://prntscr.com/j9dmdt

Fecha variable problem

[Error] ReferenceError: Can't find variable: fecha
setFechaI18n (hotel-datepicker.js:106)
getDateString (hotel-datepicker.js:182)
compareMonth (hotel-datepicker.js:1045)
init (hotel-datepicker.js:237)
HotelDatepicker (hotel-datepicker.js:70)
Kod globalny (script.js:1)

Is inline / open by default calendar possible

Hello,

I was wondering is there a quite simple way to have the calendar inline / already open in it's place when page loads? It would save some clicks for the user and show disabled dates at glance.

Impossible dates are clickable

I require at least 5 nights and have a time frame of 3 days between two disabled dates - it's possible to click them for start but not to end the selection.
In my opinion the selection should stop on every click - independent of valid or not. And a nice to have would be to mark the dates that are impossible to book, because of minNights and available nights, as such with a new CSS class.

issue with Disable some dates not working.

Hi sir,
I try to make disable dates like thats,
1). one ways

var hdpkr;
       $(document).ready(function () {
           var input = document.getElementById('ppzdate');
           hdpkr = new HotelDatepicker(input, {
             format: 'DD-MM-YYYY',
             autoClose: false,
             disabledDates:  [
               2017-09-27,
               2017-09-23,
               2017-09-26,
               2017-09-28,
               2017-10-01,
               2017-10-11
           ]
           });
           hdpkr.open();
       });

--------------error -------------

2). 2nd ways
because getting disabled dates json

var  disabledDates1= ["2017-09-27","2017-09-23","2017-09-26" ...............................]
 var hdpkr;
        $(document).ready(function () {
             var  disabledDates1= [
                2017-09-27,
                2017-09-23,
                2017-09-26,
                2017-09-28,
                2017-10-01,
                2017-10-11
            ]
            var input = document.getElementById('ppzdate');
            hdpkr = new HotelDatepicker(input, {
              format: 'DD-MM-YYYY',
              autoClose: false,
              disabledDates: disabledDates1,
            });
            hdpkr.open();
        });

-----------error-------------------
getting same error..

Notes: otherwise how to i make some dates is disable.

Bug: startDate and endDate not working when they are not in the same year (or maybe, not in the current year)

startDate: "2018-12-25"
endDate: "2019-01-14"

All december date are selectable (I cannot go to november with previous arrow (its ok :) )) but date before 2018-12-25 should not be selectable

If startDate and EndDate are in the same year, everything is allright.

startDate: "2019-02-25",
endDate: "2019-02-27",

"getValue()" Sample usage

Hello,

How do I get these dates if the user has determined the dates?
How to use this method , can you give me an example?

Thank you!

getValue()

This function is called when the picker gets the date range string from the input.

container options

Would you please show me an example?

Pre-Determined date range

Hi,

This looks awesome and I'm really hoping I can use it on a project I'm working on however it has slightly different requirements.

Essentially, instead of hotel booking, it's for trip booking. The requirements are almost identical except instead of allowing the user to choose the date range, it's already pre-determined to 'x days'.

Is there a workaround (or supported functionality) to change the behaviour so that when a user clicks on the first date, the second date is automatically selected (highlighting the days inbetween)?

Conditional required nights (opposite of #52)

Hi,

The solution as offered in #52 is a good one, but I'm looking for another option. Would it be possible to have the end date clickable even it is lower than the required number of nights?

So if there is an availability of 3 nights, but required nights is 5, I'd like to lower the required nights to 3 for that period- and make it possible to select an end date.

That would help to get a better fill rate.

Inline calendar (for mobile)

First of all, great job on this datepicker :)!

Have you considered an optimization for mobile where the date picker would be inline instead of you having to tap to open it? Perhaps even stack the calendar months on top of each other so the user has to tap less. What do you think?

Highlight specific date

Hi.
Is it possible to highlight the specific date / range of dates if, for example, there is a discount on staying and I'l like a customer to notice that?
Thank you.

How can we disable typing?

Hi, this is really a good one for booking system. How can we disable typing. Is there any built in function?

Disabled Dates Styling

I am using your datepicker with disabledDates: [] AND enableCheckout: true.

Do you have a suggestion how to have different styling on the "enableCheckout" date and the day after the last disabled date in a block of disabled dates?

Best look at the example attached.

Disabled dates demos

On your demo page, on the "Disable some dates" demo you have six(6) initial dates that are disabled on the calendar. There are two minor issues.

1. Issue Type: BUG
   When you click/select any first date, the closest disabled date BEFORE the date you clicked/selected is no longer disabled and can now be selected. This can lead to a user choosing an unavailable date.

For example: If Aug 7th, 8th, and 9th are disabled, clicking on any date greater than Aug 9th will make Aug 9th available.

2. Issue Type: UI/UX
   When you click/select your first date you are stuck with that date. It would be more user friendly if clicking again on that date clears the date if no other date is selected.

These two issues are present with or without "enableCheckout: true"

Other than that, fantastic work!

Enabled dates

Is it / would it be possible to provide a whitelist of dates rather than the blacklist of dates for the disabled dates.

Ideally the availability would be in the reverse to what's currently formatted, by inputting the available dates

Can't insert to container div

I've trying to add calendar to div#calendar-container without luck.

As option:

var datepicker = new HotelDatepicker(document.getElementById('calendar-input'), {
		format: 'DD-MM-YYYY',
		separator: '|',
		startOfWeek: 'monday',
		showTopbar: false,
		autoClose: false,
		container: '#calendar-container'
});

Without container works on input fine.
JS Console give me an error:

TypeError: this.parent.insertAdjacentHTML is not a function. (In 'this.parent.insertAdjacentHTML("beforeend",t)', 'this.parent.insertAdjacentHTML' is undefined)

<div id="calendar-container"></div>
is present in html

Any idea ?

EDIT: I found solution. There must be an object instead of id name:

...
container: document.getElementById('#calendar-container')
...

MinNights of 0 is not working

A global minimum number of nights is forced to be one, ie. you cannot select the same start and end date.

Preconditions:

Version 3.0.1 of hotel-datepicker
Version 2.3.1 od fecha
Browser chrome onmacOS

Changing the demo1 code to:

var demo1 = new HotelDatepicker(input1, 
	{
		minNights: 0
	}
);

does not allow the selection of a single date for start and end date

Day in month is disabled without a reason

I found one strange bug, that some day in month is disabled without a reason

.

Steps to reproduce:

• Go to http://lopezb.com/hoteldatepicker/
• Go to "Don't close the datepicker after selection" and click in textbox to open calendar
• Click 30.4.2018. in right calendar
• Click Right Arrow in April to go to Mai
• Click Right Arrow in left calendar, to go to April
• Click 01.05.2018. in right calendar
• Click 29.04.2018. in left calendar

Now is 30.04.2018. in left calendar disabled, and can't no more be selected.

Get days name on select day?

I need get the days name, is some option or event for this?

Buttons don't disable on mobile

On mobile (just one calendar visible) the buttons keep visible all the time. Even if in first/last month.
It should be like on desktop and disable the previous/next button if in first/last month.

Set Range not working for specific dates.

Hi, pretty great plugin! I'm unfortunately having some issues with it right now!

If I call something like .setRange( '2018-10-27', '2018-11-01' ); then the whole calendar resets and the range doesn't get applied. This seems to happen to some date ranges but not others. I'm not able to select anything up to 11-04 but .setRange( '2018-10-27', '2018-11-05' ); works.

Do you have any idea why this is happening?

From what I can tell valid does not get set to false in your setRange function

Mininum number of nights in a range of date

I have a very specific problem. In my case, I can have a minimum of night for an selected range of date.

Example, between 2018-10-01 and 2018-10-15, user MUST select a minimum of 3 nights, otherwise, they have no minimum of nights. Can I do something to do this with your plugin?

Modify only end date

Is it possibile to change only end date after select a range (like https://www.ryanair.com) ?

Thanks in advance
Francesco

Destroy calendar, or refresh

Hello, I want to update the calendar's disabledDates after it was #initalised, I am thinking that the most easy way would be to destroy the calendar and initiate it again, how can I do that?

If I do this it's good?

$('#datepicker-clientCalendar').remove();

And then reinitialise it with the new options.

Reset calendar after destroy?

how i cand reset selected dates and other options when destroy?

One month displayed

Hello.
Is it possible somehow to display only only month without "next"?
The example is in attachment.
Thank you!

Event listner on update date picker (when you do=

Getting selected number of nights

How can i get the selected number of nights from api when user pick the date.

Thanks.

Event listner on update date picker (when user don't close datepicker windows)

You have an event for close but can you add a Event Listner when date selection change? I need to trigger an event when the user change the date without close the calendar.

I try input.addEventListener('change', function () but its not working. Thanks

Scroll & No weekdays bar

Hi, its really awesome. You rock)
Several suggests for calendar...

maybe you could add a "flatMode"
For example set 6 month and picker show me all 6 month one by one
I thinks its more informative and responsive, like this
https://gyazo.com/ffca9cd0a18fb0b43d699a641f72f13d

and the second one is options like
showWeeks
showMonth

Thanks!

bug when "enableCheckout = true" & "autoClose=false"

when option set "enableCheckout = true" & "autoClose=fale" ,
first , select normal range is ok ,
then you can select a disabled date , and make a disabled range .

before:

after:

minNights not consistent with calendar title/message

Very nice datepicker! However, I found a bug that would be great to have fixed: When having set minNights: N as an option where N is an integer, the calendar title/message shows "Please select a date range longer than N night", but it only needs to be longer than N-1 night(s), i.e. minimum N, not minimum N+1, nights. So when setting minNights: 1, it only needs to be longer than 0 night, not longer than 1 night.

Add prices in calendar

I have added prices to calendar, but now I must adjust css to style calendar properly, because date cell is now bigger:

Can you point me in right direction, what should I change in sass (_base.scss?), to adjust cell width?
Maybe is there also a better way to add price, instead with <br> tag?

I am not so experienced in css...

I added in constructor of HotelDatepicker two additional parameters, priceDates and priceCurrency:

		this.priceDates = opts.priceDates || [];
		this.priceDatesUsed = this.priceDates.length > 0;
		this.priceCurrency = opts.priceCurrency || '€';

Can't Show the datepicker on .open() function

The datepicker work perfectly, but doesn't appear if I apply the function .open() to the HotelDatepicker object, by clicking on the element I want. The click event is recorded in the console, so the problem is the hotel-datepicker object. No JS error in the console

picker_options = {
    autoClose: true,
    startDate: today,
    format: 'DD-MM-YYYY',
    startOfWeek: 'monday',
    moveBothMonths: true,
    separator: ' / '
}
var Hotel_Datepicker = new HotelDatepicker(datepicker_input_DOM, picker_options);

$(dom_selected_element).on('click',function(){
     console.log("CLICKED");
     Hotel_Datepicker.open();
});

Month change event like jquery ui datepicker

I am developing a hotel room booking system. For that I am planning to use your wonderful plugin. I have to show in seasons and holidays in calendar. That means, winter starts from Nov 15 to April 25 & Summer starts from May 15 & Oct 10. In between these seasons some days are holidays. In calendar, I need to show holidays and not season days as disabled in calendar. Is it possible with this plugin? Do this plugin support next month change event like jquery ui datepicker.

moveBothMonths not working and enables other prev/next buttons

This is an awesome datepicker and and I really want to use it, but I'm having issues with the moveBothMonths navs.....
Notice how the nav buttons that should remain disabled show up. Is there a fix for this?
https://www.useloom.com/share/fa084cc18e064712aa6c63d7f7c9bbb8

How to change color of input:active?

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;
}

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

showTopBar option is not working

Preconditions:

Version 3.0.1 of hotel-datepicker
Version 2.3.1 od fecha
Browser chrome onmacOS

Changing the demo1 code to:

var demo1 = new HotelDatepicker(input1, 
				{
					autoClose: true,
					showTopbar: false
				}
			);

does not remove the top bar on the datepicker

How to always show in div.

Hi,
Is posssible to always show datepicker like container, wihtout input tag.

Demo

Hi Benito, there seems to be an issue with demo. Input fields won't init date-picker's. Is there something missing in installation instruction?

NPM registry ?

Hi,
I can't find your module in the NPM registry. Can you publish it ?
https://www.npmjs.com/search?q=hotel-datepicker

thanks

How to get value after date picket close.

I am use this plugin in Angular 4.x, which callback or method to get all values like startdate, enddate, nights, day after close datepicker.
Thanks.

fire on event

How can I use events with this calendar?

Logo Proposal

Good day @benitolopez I am a graphic designer and an open-source enthusiast and i would like to propose a logo design for your nice project as a gift for free. I just need you permission first before I begin my design. Thanks and best regards! - Tobaloidee

like it, some way to allow empty end date range

hi, i like your pure js "no jquery" implementation of date range picker

there's some way to allow user choose starter date and let empty the end of the range optionally?

if i must change the code there's no problem, i try but please i need it.

Select only one date

Congratulations on the fantastic work.
Is it possible to select only one date?