Jump to content

Restrict Dates And Numbers Of People


Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 9 years later...

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.

image.png

Result:

image.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...