Restrict Dates And Numbers Of People

[juancoffee]

Hello

 

I'm a bit of a Caspio newbie and pretty unskilled (ok - very unskilled!) at Javascript.

I have a couple of, hopefully small, issues that I assume I need some basic javascript to solve.

I've tried adapting code that I've found elsewhere, but I don't really know what I'm doing:-

1.I have a field called 'maximum_people' and one called 'no_of_people'.
I need to restrict the number of bookings received on a given date, so if I create a report datapage (filtering by date) I need to add up all the 'no_of_people' submissions, and then have the form stop if it >='maximum people'. 
I suppose I need something like-

<script>
if(SUM[@field:no_of_people] <[@field:maximum_people])
{
document.write("<a href='http://b6.caspio.com/dp.asp?AppKey=504f20004a6cefd06ad94881b12c&Course_ID=[@field:Course_ID]'>Signup</a>");
}
else
{
document.write("<p>Signup Closed</p>")
}
</script>

2.)The second thing is a simple block to ensure that no bookings are made before today (as the Caspio calendar allows any date to be selected, even in the past)-
I guess it is sort of like-
<script>
if([@field:date] >="today")
{
document.write("<a href='http://b6.caspio.com/dp.asp?AppKey=504f20004a6cefd06ad94881b12c&Course_ID=[@field:Course_ID]'>Signup</a>");
}
else
{
document.write("<p>Sorry, we can only take bookings from tomorrow onwards</p>")
}
</script>

 

I'm flying blind though, and there are probably 101 better ways to achieve what I need.

 

Hopefully someone can help...

 

Duncan

[MayMusic]

I am looking into that for you for you here is what I found to compare the date so far: http://stackoverflow.com/questions/13062526/how-to-compare-date-with-todays-date-where-date-is-in-format-dd-mm-yyyy

[Barbara]

Hi, as for the first one there is a techtip at http://howto.caspio.com/customization/limit-the-number-of-maximum-submissions.html which may help you with what you're trying to achieve.

 

For the second one your logic is correct but you need to define a variable and assign today's value then use that in your comparison. You can capture today's value by using [@cbTimestamp]

 

In either case JavaScript method is not a bullet proof way of limiting submissions. Because JavaScript can easily be manipulated by a technical user as it runs on the browser side. A recommended method is to write a server side program to achieve this. This can be done by Caspio PS team. If you are interested to get a quote you can submit the requirements at http://www.caspio.com/support/professional-services.aspx.

 

Cheers,

Barbara

[MayMusic]

This code can help you to prevent from entering previous dates:

<script>
function checkdate(){
alert('in');
var sdate = document.getElementById('InsertRecordDATEFIELD').value;
if (Date.parse(sdate) < Date.now()) {
    alert("Choose a date after today");
    return false;
}
}
document.getElementById('caspioform').onsubmit=checkdate;
</script>

Replace "DATEFIELD" with the date field name. And if the code is being used in an update page change InsertRecord to EditRecord.

[juancoffee]

That's great - thanks for the help.

 

Your code is great - thanks MayMusic.

 

One thing though; how do I stop the pop up saying 'The page at b6.caspio.com says' at the top.

I just want it to say 'Choose a date after today'

 

Thanks

[MayMusic]

Did you try to deploy the page and see if that resolves the issue?

[juancoffee]

Hello

It is ok if  I view it on another computer. I guess it must cache the IP or something... (clearly I've no idea really).

Anyway, it works - so that's great.

Thanks very much; I really appreciate your help.

[MayMusic]

You are very welcome

[Kurumi]

Hi! - Just wanted to share this solution. If you want to save and restrict/disable Date. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To apply in the DataPage, follow these steps:

1. Insert Header and Footer. In the Footer, insert the code below. Make sure to disable first the HTML Editor in the Advanced Tab.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--  Flatpickr  -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

$("#InsertRecordAppointment").flatpickr({
    dateFormat: "d/m/Y",
    altInput: true,
    altFormat: "m/d/Y",
    disable: [
        {
            from: "26-10-2022",
            to: "31-10-2022"
        }
    ]
});

</script>

Optional: You can insert this Style/CSS in the Header to change the font based on your DataPage's style.
 

<style>

.flatpickr-calendar {

 font-family: system-ui !important;

}

</style>

To know the formats, you can check them here: https://flatpickr.js.org/formatting/

enableTime - you are enabling time to the picker
dateFormat - format of the date that will be saved in the table. Caspio only accepts MM/DD/YYYY format in the table.
disable: range of date that you would like to disable - format will be based on the the dateFormat 

If you want to have a different display in the Text Field when selecting Date and Time, you can add altInput. altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a m/d/Y H:i string, while the altInput will display the date in a more legible, customizable format.

Example:

$("#DATETIMEFIELD").flatpickr({
    enableTime: true,
    dateFormat: "m/d/Y H:i",
    altInput: true,
    altFormat: "F j, Y H:i"
});

IMPORTANT Note: Uncheck the Calendar pop-up in the field to apply the flatpickr.

Result: