Hello, this is my scenario:
1) a datepicker to choose a day for booking on restaurant (required field)
2) saturday opened only in the morning, sunday closed (I know how to disable sunday in datepicker options)
3) a dropdown select list of hours ranges for booking: morning and evening (required field)
4) a dropdown select list of hours ranges for booking on saturday morning (required field if saturday is picked)
What I want to do is:
if user select a saturday in the datepicker then I would hide field 3) and show field 4)
How can I do that?
Also, is there a better way also to populate just 1 dropdown field according to date selection instead of using 2 fields?
Could you please help me step by step also with javascript code (if needed)?
Thanks in advance
1) a datepicker to choose a day for booking on restaurant (required field)
2) saturday opened only in the morning, sunday closed (I know how to disable sunday in datepicker options)
3) a dropdown select list of hours ranges for booking: morning and evening (required field)
4) a dropdown select list of hours ranges for booking on saturday morning (required field if saturday is picked)
What I want to do is:
if user select a saturday in the datepicker then I would hide field 3) and show field 4)
How can I do that?
Also, is there a better way also to populate just 1 dropdown field according to date selection instead of using 2 fields?
Could you please help me step by step also with javascript code (if needed)?
Thanks in advance
Hi deltafidesign,
I'm pretty certain that you can do this with custom JavaScript using a single hours drop-down by removing or disabling some of the options if a Saturday is checked.
There's an example of some jQuery code in this StackOverFlow answer.
Bob
I'm pretty certain that you can do this with custom JavaScript using a single hours drop-down by removing or disabling some of the options if a Saturday is checked.
There's an example of some jQuery code in this StackOverFlow answer.
Bob
Hello Bob,
thanks for reply but I'm not able to understand how to use it.
Thanks anyway.
thanks for reply but I'm not able to understand how to use it.
Thanks anyway.
Hi deltafidesing,
This works but needs adjusting depending on your form setup.
On the Advanced tab of the datepicker element add setHours in the On date selected
In a Load JS action add code like this:
In this example the element IDs are datepicker1 and dropdown2.
The dropdown is set with an option list like this
When you select a Saturday the evening hours are disabled. See my test form here.
Bob
This works but needs adjusting depending on your form setup.
On the Advanced tab of the datepicker element add setHours in the On date selected
In a Load JS action add code like this:
function setHours() {
var date, day;
// convert date from dd-mm-yyyy
date = jQuery('#datepicker1').val().split('-');
date = new Date(date[2], date[1] - 1, date[0]);
day = date.getDay();
jQuery('#dropdown2 option').each(function() {
var option = jQuery(this);
if ( day == 6 && option.val() > 13 ) {
option.prop('disabled', true);
} else {
option.prop('disabled', false);
}
});
}In this example the element IDs are datepicker1 and dropdown2.
The dropdown is set with an option list like this
10=10am-11am
11=11am-12noon
12=12noon-1pm
13=1pm-2pm
18=6pm-7pm
19=7pm-8pmWhen you select a Saturday the evening hours are disabled. See my test form here.
Bob
Thanks so much bob! Worked perfectly!
Now, how should I change the javascript code to let it work for a period instead of a single day?
I mean, suppose that I want to disable those hour ranges only from 13th september to 26th may, can you please help me with the javascript code?
I mean, suppose that I want to disable those hour ranges only from 13th september to 26th may, can you please help me with the javascript code?
Hi deltafidesign,
It's certainly possible but starts to bet more complicated. I'd suggest that if you want to do more flexible scripts using dates then you use the moment.js library which is designed for handling dates.
I think this would work for your specific example - but only for one year:
Bob
It's certainly possible but starts to bet more complicated. I'd suggest that if you want to do more flexible scripts using dates then you use the moment.js library which is designed for handling dates.
I think this would work for your specific example - but only for one year:
function setHours() {
var date, day, startDate, endDate, inRange;
// convert date from dd-mm-yyyy
date = jQuery('#datepicker1').val().split('-');
date = new Date(date[2], date[1] - 1, date[0]);
day = date.getDay();
startDate = new Date('2016-09-13');
endDate = new Date('2017-05-26');
inRange = date >= startDate && date <= endDate;
jQuery('#dropdown2 option').each(function() {
var option = jQuery(this);
if ( inRange && day == 6 && option.val() > 13 ) {
option.prop('disabled', true);
} else {
option.prop('disabled', false);
}
});
}Bob
This topic is locked and no more replies can be posted.
