Date validation on Submission Form

[Alexray]

Hello Caspio Family,

Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 

1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block

2) Inside HTML blocks we need to add some warning message in case the condition is not met

3) Create 2 Rules as on screenshots

That solution will show our warning messages, but won't prevent form submission if a user disregards the warning.
 

But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript:

1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections.

2. In the Header enable 'Source' and paste the code:
<script>
document.addEventListener("BeforeFormSubmit", function (event) {
startDate = document.querySelector("#InsertRecordDateStart").value;
endDate = document.querySelector("#InsertRecordDateEnd").value;
warn1 = document.querySelector("#warning1");
warn2 = document.querySelector("#warning2");

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
if (startDate < today) {
event.preventDefault();
warn1.style.display = 'block'
} else {
warn1.style.display = 'none'
}
if (endDate <= startDate) {
event.preventDefault();
warn2.style.display = 'block'
} else {
warn2.style.display = 'none'
}
});
</script>

3. In the HTML block 1 enable 'Source' and paste:
<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span>

4. In the HTML block 2 enable 'Source' and paste:
<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span>

5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the lines
startDate = document.querySelector("#InsertRecordDateStart").value;
endDate = document.querySelector("#InsertRecordDateEnd").value;
to the name of the fields you have.

 

You can test to see how it works on my DataPages:

1st solution with Rules

2nd solution with JS

[ChristianM]

Excellent solution using Rules. It was very easy to implement. Thanks!

[Alexray]

In addition to the JS solution.

In case you have a date format with name of month or day of the week, you may also need variables for them:
const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
let today = new Date();
let nameOfDay = weekday[today.getDay()];
let nameOfMonth = month[today.getMonth()];
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();

 

For example, if your format looks like 2022-Jun-17-Fri, then you get the same format this way:
today = `${yyyy}-${nameOfMonth.slice(0, 3)}-${dd}-${nameOfDay.slice(0, 3)}`;

Hope it helps someone.
Let me know if there are any questions.

[Meekeee]

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: