Hi everyone,
I am using Web Form Builder for a bus reservation form. Currently, the date picker allows users to select any date (past or future).
I need to restrict the calendar selection so that only future Wednesdays are selectable, and all other days are disabled.
You can see the form here: https://callprotravel.com/f/bus/bus.html
Is there a way to achieve this through the software settings or a custom script?
Thanks in advance for your help!
Web Form Builder: How to restrict...
zizo
Registered User
36 posts
Eric Rohloff
Senior Advisor
20,297 posts
Hi Zizo,
I can help you with that. Give me a bit.
I can help you with that. Give me a bit.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Eric Rohloff
Senior Advisor
20,297 posts
Give this a try.
Paste code into an HTML element within your form. Find the id of your datepicker using your browsers inspection tool and adjust the code where it says to.
Paste code into an HTML element within your form. Find the id of your datepicker using your browsers inspection tool and adjust the code where it says to.
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script>var jQ = $.noConflict();
jQ(document).ready(function() {
// adjust this to the actual ID of your datepicker
jQ("#item1_date_1").attr("id","item1_date");
});
var jK = jQ.noConflict();
jK( window ).load(function() {
// 1 = monday, 2 = tuesday, 3 = wednesday, 4 = thursday, 5=friday, 6 = saturday, 7=sunday //
var daysToDisable = [1,2,4,5,6,7];
jK("#item1_date").datepicker({ beforeShowDay: disableSpecificWeekDays, minDate: 0 });
function disableSpecificWeekDays(date)
{ var day = date.getDay(); for (i = 0; i < daysToDisable.length; i )
{ if (jK.inArray(day, daysToDisable) != -1)
{ return [false]; } } return [true]; }
});</script>
jQ(document).ready(function() {
// adjust this to the actual ID of your datepicker
jQ("#item1_date_1").attr("id","item1_date");
});
var jK = jQ.noConflict();
jK( window ).load(function() {
// 1 = monday, 2 = tuesday, 3 = wednesday, 4 = thursday, 5=friday, 6 = saturday, 7=sunday //
var daysToDisable = [1,2,4,5,6,7];
jK("#item1_date").datepicker({ beforeShowDay: disableSpecificWeekDays, minDate: 0 });
function disableSpecificWeekDays(date)
{ var day = date.getDay(); for (i = 0; i < daysToDisable.length; i )
{ if (jK.inArray(day, daysToDisable) != -1)
{ return [false]; } } return [true]; }
});</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.