How to disallow manual editing...

User 2642607 Photo


Registered User
33 posts

I have an issue I have encountered with dates being altered on the web form builder calendar

Version Number Below:

Web Form Builder version 2.5 Build 5437

I added the following code to jquery.ui.datepicker to disable all historic days and + 2 days from whatever is todays date (meaning today and tomorrow are always unavailable for selection).
This is working perfectly as the unwanted dates are not displayed for selection.
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
},

However, people are getting around this by doing the following:

If someone selects from the calendar first available date (say; 13th June) then once the date is selected it is displayed in the form field like this "06/13/2019"
The person making the booking then just clicks in the form field and they can edit it to todays date by simply highlighting 13 and typing in 11.

So my question is this:

Once someone has selected the date from the calendar is there any way of stopping them from manually editing this date by inputting a new date by typing over the selected date?
User 187934 Photo


Senior Advisor
20,181 posts

Hi Michael,
See if this works for ya.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script>
//Ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ( "#item1_date_1" ).attr("id","Date_Picker");
jQ( "#Date_Picker" ).datepicker({
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
jQ(this).datepicker( "option", "minDate", "+2" );
}
},

}).attr('readonly','readonly');
});</script>

You may need to remove the script wrapping the iframe code that the Form Builder provides.
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,

I am thinking I need to place this code in the form html page, just after the line:

<!-- End of the headers for CoffeeCup Web Form Builder -->


If yes, I already have another custom code (you provided also :-)) at that location, so I add the above after the existing addition (minus the 2 js scripts)?

Here is the existing custom 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"></script>
<script src="http://www.ecocameron.com/js/jquery-ui.js"></script>
<script>
// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item27_date_1").attr("id","Date_Picker");
var holidays = ["25/08/2019","27/10/2019"]; //Enter the needed dates here.
jQ("#Date_Picker").datepicker({
beforeShowDay: function(date){
var datestring = jQ.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
});
</script>

When you say:

You may need to remove the script wrapping the iframe code that the Form Builder provides.

Can you expand on this? As I'm unsure how to interpret it
User 187934 Photo


Senior Advisor
20,181 posts

I'm confused as this code doesn't look like the first one posted.
Michael Farrelly wrote:


Here is the existing custom 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"></script>
<script src="http://www.ecocameron.com/js/jquery-ui.js"></script>
<script>
// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item27_date_1").attr("id","Date_Picker");
var holidays = ["25/08/2019","27/10/2019"]; //Enter the needed dates here.
jQ("#Date_Picker").datepicker({
beforeShowDay: function(date){
var datestring = jQ.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
});
});
</script>




First Code
beforeShow: function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8AM
if(hour >= 08){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
},

Can you share a link to your form? This makes it so I'm not doing things that aren't needed.
The code I provided can be pasted directly into a HTML element in the Form Builder.:cool:
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,

Sorry for creating the confusion, what I meant was the existing form already has some custom code on it, so I'm just wondering if I add the code your suggested after the existing custom code.

Here is the link to the page that contains the form:

http://www.ecocameron.com/the-mossy-forest-of-gunung-brinchang.html

#edit#
You can see on the form all historical days are not available for selection (plus today and tomorrow).
Also the existing custom code makes one day in August and one day in October not available for selection
User 187934 Photo


Senior Advisor
20,181 posts

Per your request.
1. All previous dates disabled.
2. Today and tomorrow are disabled.
3. 25/08/2019 and 27/10/2019 are disabled.
4. Altering input is disabled.
Let me know if that works.:)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://www.ecocameron.com/js/jquery-ui.js"></script>
<script>
// ver 2
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item27_date_1").attr("id","Date_Picker");
var holidays = ["25/08/2019","27/10/2019"]; //Enter the needed dates here.
jQ("#Date_Picker").datepicker({
minDate: +2,
beforeShowDay: function(date){
var datestring = jQ.datepicker.formatDate('dd/mm/yy', date);
return [ holidays.indexOf(datestring) == -1 ]
}
}).attr('readonly','readonly');
});
</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
User 2642607 Photo


Registered User
33 posts

Eric, you are a star sir, it works perfectly :)
I take my hat off to you and I have to say that CoffeeCup support service is the best I have encountered anywhere.
You guys rock.
Is there anywhere on your site I can write a testimonial about your product/service? I will gladly take the time to write one
User 187934 Photo


Senior Advisor
20,181 posts

In your original post it looked like you may have wanted to disable today and tomorrow based on the time of day.
This code will do that.
<script>
// ver 1
var jQ = $.noConflict(true);
jQ(function () {
jQ("#item27_date_1").attr("id","Date_Picker");
var dateTime = new Date();
var hour = dateTime.getHours();
if(hour >= 8){
var currentDate = dateTime.getDate() + "/" +(dateTime.getMonth()+1) + "/" +dateTime.getFullYear() ;
dateTime.setDate(dateTime.getDate()+1);
var Tomorrow = dateTime.getDate() + '/' + (dateTime.getMonth() + 1) + '/' + dateTime.getFullYear();
}
var unavailableDates = ["25/8/2019","27/10/2019",currentDate,Tomorrow];

function unavailable(date) {
dmy = date.getDate() + "/" +(date.getMonth()+1) + "/" +date.getFullYear() ;
if (jQ.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}

jQ(function() {
jQ("#Date_Picker").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
beforeShowDay: unavailable
}).attr('readonly','readonly');

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

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.