Disable One Future Day in Web Form...

User 2642607 Photo


Registered User
33 posts

I'm trying to disable one future day in web form builder datepicker, so far without success.
Here's the current code i've got (not functioning and getting errors in console):
<script type="text/javascript">
var array = ["10/11/2015"]

$('item27_date_1').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd/mm/yy-', date);
return [ array.indexOf(string) == -1 ]
}
});
</script>

I've tried many different variants of this and I seem to be hitting a brick wall now.

The above code has been placed in the head of the html form.

I've searched the forums and also found Eric's excellent tutorial which does something similar:
http://ericrohloff.com/coffeecup/ccforum/formbuilder/datepickerdays/

Has anyone successfully implemented this for a specific future date?
If yes I would really appreciate some input that could help.

User 2642607 Photo


Registered User
33 posts

I found another great post by Eric that is exactly what I want:
http://ericrohloff.com/coffeecup/ccforum/formbuilder/coffeecup-forms/datepickernoholidays/
I've followed the instructions but it did not work, here's my code:
<!-- End of the headers for CoffeeCup Web Form Builder -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var holidays = ["10/11/2015","16/11/2015","22/11/2015"]; //Enter the needed dates here.
$( "#item27_date_1" ).datepicker({
beforeShowDay: function(date){
var datestring = $.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
});
</script>

It is not disabling the 3 dates requested and, I'm getting the following console error:
Uncaught TypeError: $(...).datepicker is not a function

This is pointing to the form php file

I tried to change the id of the datepicker to 'item1_date' as Eric suggested but then the datepicker stopped opening so I changed it back (as above). This is the id of the first form on the page (there are 2 forms but I'm just trying to get one excluding days first):
<input name="date27" class="datepicker" id="item27_date_1" type="text"


I kinda feel i'm edging towards the right solution but i'm not quite there yet.
User 2642607 Photo


Registered User
33 posts

I find something unusual, i can still select the date 10thNov but, if I open the datepicker again I can see 10thNov is now blanked out & unselectable.
Also, if I select say 2ndNov then 10thNov becomes blank.
I've added the code for the 2nd datepicker now, so it's looking like this;
<!-- End of the headers for CoffeeCup Web Form Builder -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var holidays = ["10/11/2015"]; //Enter the needed dates here.
$( "#item27_date_1" ).datepicker({
beforeShowDay: function(date){
var datestring = $.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
});
</script>
<script type="text/javascript">
$(function () {
var holidays = ["10/11/2015"]; //Enter the needed dates here.
$( "#item26_date_1" ).datepicker({
beforeShowDay: function(date){
var datestring = $.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
});
</script>

The above behaviour is the same in both datepickers.
So at least I know it is doing something now, it just needs some behaviour adjustment, I think.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Hi Michael,
Can you share a link to your form?
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
User 2642607 Photo


Registered User
33 posts

I just put it back onto the live site:

http://www.ecocameron.com/bird-watching.html
User 2642607 Photo


Registered User
33 posts

One other thing, the new code is overriding datepicker, it was configured to disable todays, tomorrows & past dates.
The cut off for booking tomorrow is usually 8pm local time.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

10/11/2015 has already passed.;)
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
User 2642607 Photo


Registered User
33 posts

Hi Eric,
It's set up British not US.....dd/mm/yy
So 10/11/15 is 10th November 2015

Or, are you saying when select the date format in web form builder that it is impossible to override?
I think if I cannot override the default what is the point of web form builder offering the option
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Ok So those days appear to be unselectable.
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
User 2642607 Photo


Registered User
33 posts

Hah yes :lol: I just try in a different browser and now unselectable. Maybe this was a cache issue yesterday?????

Just wondering though.........The following code is taken from jquery.ui.datepicker js:

minDate: +1, // The earliest selectable date, or null for no limit
maxDate: null, // The latest selectable date, or null for no limit
duration: '_default', // Duration of display/closure
beforeShowDay: null, // Function that takes a date and returns an array with
// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
// [2] = cell title (optional), e.g. $.datepicker.noWeekends
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){

This part is now being override so past dates are now selectable, can I include this in the head of the form html also?

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.