restrict Date entered

[ppbb123]

How to restrict a date which is only before today on a submission form?

For example: Today is 10/01/2012, if the user select 10/02/2012 from the calendar and submit the record, submission will fail.

[HongTaiLang]

You can try to insert the following script into the footer of the DataPage.

<script type="text/javascript"> 

function show_confirm()
{ 
var Current = "[@cbTimestamp*]"; //get the current date
      Submit_Date = document.getElementById("InsertRecordFieldName").value;  //select from calender 

//format the date for comparing
var regS = new RegExp("-","gi"); 
Current =Current .replace(regS,"/"); 
Submit_Date=Submit_Date.replace(regS,"/"); 
var Current1 =new Date(Date.parse(Current)); 
var Submit_Date1 =new Date(Date.parse(Submit_Date));

if (Current1 >= Submit_Date1)
{
 document.getElementById("caspioform").submit();
}
else
{
alert("Wrong Date. Escape Submitted.");
return false;
}
}

document.getElementById("caspioform").onsubmit=show_confirm;

</script>

"InsertRecordFieldName" is the Date field Name on the submission form.

[ppbb123]

Thank you so much. That helps me a lot. And I figured out the code to restrict number field.   

<script type="text/javascript"> 

function show_confirm()
{ 
//get the insert value
var numberField= document.getElementById("InsertRecordNumberField").value;  

//compare the range, if the number field is between 1 to 100, then submit, otherwise an error message pops up
if ( numberField >= 1 && numberField <= 100)
{
 document.getElementById("caspioform").submit();
}

else
{
alert("Wrong Data. Escape Submitted.");
return false;
}
}

document.getElementById("caspioform").onsubmit=show_confirm;

</script>

[Kurumi]

Hi - these posts might help:

 

[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:

[RuisiHansamu]

Hi there! I wanted to share that Caspio has released a new article for disabling future dates:https://howto.caspio.com/tech-tips-and-articles/disabling-past-or-future-dates-in-calendar/