Jump to content
  • 0

restrict Date entered


ppbb123

Question

5 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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>
Link to comment
Share on other sites

  • 0

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
Answer this question...

×   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...
×
×
  • Create New...