checkin and checkout date selectors

arl_garm
Offline
Last seen: 2 months 1 week ago
Fri, 12/02/2016 - 19:30
#1
checkin and checkout date selectors

Hi,

I would like to add the following functionality to the page, where I have a form with 2 awe-calendars, let's say the first one is checkin and the second is checkout.

When the user selects the checkin date I would like to show the checkout calendar expanded, to let know the user that he, in theory, should select a checkout date.

Now when the user selects the checkin date, I manage to increase the checkin date in one day and assign it to the checkout calendar. But I would like also to make the checkout calendar visible.

Is there any way to do it?

I tried to set the focus or select the checkout calendar, but awe-calendar behaves in a weird way.

thanks in advance

Ariel

hattt13
Offline
Last seen: 2 days 18 hours ago
Mon, 12/05/2016 - 09:48

Hi Arl_garm, you can send me a link to your site so I can see more clearly what you say. Thanks.

hattt13
Offline
Last seen: 2 days 18 hours ago
Mon, 12/12/2016 - 10:28

Hi there, you can find function aweCalendar in script.js replace width the code: 

function aweCalendar() {
$('.awe-calendar').each(function() {
if ($(this).val() == 'Check in')
$(this).addClass('check-in');


if ($(this).val() == 'Check out')
$(this).addClass('check-out');


$(this).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat'],
onClose: function () {
if($(this).hasClass('check-in'))
$('.check-out').focus();
}
});
});
}

Thanks.

arl_garm
Offline
Last seen: 2 months 1 week ago
Mon, 12/12/2016 - 19:44

Thanks! it works perfectly!

I've added this to the onClose function, as this behaviour is not good for mobile browsers, is good only for big devices:

                onClose: function () {
                    if ($(this).hasClass('check-in') && (!isMobile.any() || isMobile.iOSiPad))
                        $('.check-out').focus();

Added this to isMobile:

        iOSiPad: function () {
            return navigator.userAgent.match(/iPad/i);
        },

thanks a lot!

Log in or register to post comments